| {"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"title":{"type":["Object"],"description":"<p>Title component, including main title and subtitle.</p>\n<p>In ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.</p>\n<p><strong>Here are some instances of different animation easing functions, among which every instance has a title component: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-easing&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the title from showing</p>\n","default":true},"text":{"type":["string"],"description":"<p>The main title text, supporting for <code>\\n</code> for newlines.</p>\n","default":"''"},"link":{"type":["string"],"description":"<p>The hyper link of main title text.</p>\n","default":"''"},"target":{"type":["string"],"description":"<p>Open the hyper link of main title in specified tab.</p>\n<p><strong>options: </strong></p>\n<ul>\n<li><p><code>'self'</code> opening it in current tab</p>\n</li>\n<li><p><code>'blank'</code> opening it in a new tab</p>\n</li>\n</ul>\n","default":"'blank'"},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>main title text color.</p>\n","default":"'#333'"},"fontStyle":{"type":["string"],"description":"<p>main title font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>main title font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>main title font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>main title font size</p>\n","default":18},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"subtext":{"type":["string"],"description":"<p>Subtitle text, supporting for <code>\\n</code> for newlines.</p>\n","default":"''"},"sublink":{"type":["string"],"description":"<p>The hyper link of subtitle text.</p>\n","default":"''"},"subtarget":{"type":["string"],"description":"<p> Open the hyper link of subtitle in specified tab, options:</p>\n<ul>\n<li><p><code>'self'</code> opening it in current tab</p>\n</li>\n<li><p><code>'blank'</code> opening it in a new tab</p>\n</li>\n</ul>\n","default":"'blank'"},"subtextStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>subtitle text color.</p>\n","default":"'#aaa'"},"fontStyle":{"type":["string"],"description":"<p>subtitle font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>subtitle font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>subtitle font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>subtitle font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"textAlign":{"type":["string"],"description":"<p>The horizontal align of the component (including "text" and "subtext").</p>\n<p>Optional values: <code>'auto'</code>, <code>'left'</code>, <code>'right'</code>, <code>'center'</code>.</p>\n","default":"'auto'"},"textVerticalAlign":{"type":["string"],"description":"<p>The vertical align of the component (including "text" and "subtext").</p>\n<p>Optional values: <code>'auto'</code>, <code>'top'</code>, <code>'bottom'</code>, <code>'middle'</code>.</p>\n","default":"'auto'"},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to enable triggering events</p>\n","default":false},"padding":{"type":["number"],"description":"<p>title space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"itemGap":{"type":["number"],"description":"<p>The gap between the main title and subtitle.</p>\n","default":10},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between grid component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between grid component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between grid component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between grid component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"backgroundColor":{"type":["Color"],"description":"<p>Background color of title, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>.</p>\n</blockquote>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of title. Support the same color format as backgroundColor.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>Border width of title.</p>\n","default":1},"borderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n<p><strong>Attention</strong>: This property works only if <code>show: true</code> is configured and <code>backgroundColor</code> is defined other than <code>transparent</code>.</p>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code>show: true</code> configured.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code>show: true</code> configured.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code>show: true</code> configured.</p>\n","default":0}}},"legend":{"type":["Object"],"description":"<p>Legend component.</p>\n<p>Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart.</p>\n<p>In ECharts 3, a single echarts instance may contain multiple legend components, which makes it easier for the layout of multiple legend components.</p>\n<p>If there have to be too many legend items, <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a> are options to paginate them. Check <a href=\"#legend.type\">legend.type</a> please.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Type of legend. Optional values:</p>\n<ul>\n<li><code>'plain'</code>: Simple legend. (default)</li>\n<li><code>'scroll'</code>: Scrollable legend. It helps when too many legend items needed to be shown.</li>\n</ul>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n<p>When <code>'scroll'</code> used, these options below can be used for detailed configuration:</p>\n<ul>\n<li><a href=\"#legend.scrollDataIndex\">legend.scrollDataIndex</a></li>\n<li><a href=\"#legend.pageButtonItemGap\">legend.pageButtonItemGap</a></li>\n<li><a href=\"#legend.pageButtonGap\">legend.pageButtonGap</a></li>\n<li><a href=\"#legend.pageButtonPosition\">legend.pageButtonPosition</a></li>\n<li><a href=\"#legend.pageFormatter\">legend.pageFormatter</a></li>\n<li><a href=\"#legend.pageIcons\">legend.pageIcons</a></li>\n<li><a href=\"#legend.pageIconColor\">legend.pageIconColor</a></li>\n<li><a href=\"#legend.pageIconInactiveColor\">legend.pageIconInactiveColor</a></li>\n<li><a href=\"#legend.pageIconSize\">legend.pageIconSize</a></li>\n<li><a href=\"#legend.pageTextStyle\">legend.pageTextStyle</a></li>\n<li><a href=\"#legend.animation\">legend.animation</a></li>\n<li><a href=\"#legend.animationDurationUpdate\">legend.animationDurationUpdate</a></li>\n</ul>\n"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"","default":true},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between legend component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between legend component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between legend component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between legend component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>Width of legend component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of legend component. Adaptive by default.</p>\n","default":"'auto'"},"orient":{"type":["string"],"description":"<p>The layout orientation of legend.</p>\n<p>Options:</p>\n<ul>\n<li>'horizontal'</li>\n<li>'vertical'</li>\n</ul>\n","default":"'horizontal'"},"align":{"type":["string"],"description":"<p>Legend mrker and text aligning. By default, it automatically calculates from component location and orient. When <a href=\"#legend.left\">left</a> value of this component is 'right', and the vertical layout (<a href=\"#legend.orient\">orient</a> is 'vertical'), it would be aligned to 'right'.</p>\n<p>Option:</p>\n<ul>\n<li>'auto'</li>\n<li>'left'</li>\n<li>'right'</li>\n</ul>\n","default":"'auto'"},"padding":{"type":["number"],"description":"<p>legend space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"itemGap":{"type":["number"],"description":"<p>The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.</p>\n","default":10},"itemWidth":{"type":["number"],"description":"<p>Image width of legend symbol.</p>\n","default":25},"itemHeight":{"type":["number"],"description":"<p>Image height of legend symbol.</p>\n","default":14},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for icons (from <code>series.symbol</code> or user-defined <code>legend.data.icon</code>) in the form of <code>path://</code>.</p>\n","default":true},"formatter":{"type":["string","Function"],"description":"<p>Formatter is used to format label of legend, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// using string template, the template variable is legend name {name}\nformatter: 'Legend {name}'\n// using callback function\nformatter: function (name) {\n return 'Legend ' + name;\n}\n</code></pre>\n","default":null},"selectedMode":{"type":["string","boolean"],"description":"<p>Selected mode of legend, which controls whether series can be toggled displaying by clicking legends. It is enabled by default, and you may set it to be <code>false</code> to disabled it.</p>\n<p>Besides, it can be set to <code>'single'</code> or <code>'multiple'</code>, for single selection and multiple selection.</p>\n","default":true},"inactiveColor":{"type":["Color"],"description":"<p>Legend color when not selected.</p>\n","default":"'#ccc'"},"selected":{"type":["Object"],"description":"<p>State table of selected legend.</p>\n<p>example:</p>\n<pre><code>selected: {\n // selected'series 1'\n 'series 1': true,\n // unselected'series 2'\n 'series 2': false\n}\n</code></pre>"},"textStyle":{"type":["Object"],"description":"<p>Legend text style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"tooltip":{"type":["Object"],"description":"<p>Tooltip configuration for legend tooltip, which is similar to <a href=\"#tooltip\">tooltip</a>.</p>\n"},"icon":{"type":["string"],"description":"<p>Icon of the legend items.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"data":{"type":["Array"],"description":"<p>Data array of legend. An array item is usually a <code>name</code> representing string. (If it is a <a href=\"#series-pie\">pie chart</a>, it could also be the <code>name</code> of a single data in the pie chart) of a series. Legend component would automatically calculate the color and icon according to series. Special string <code>''</code> (null string) or <code>'\\n'</code> (new line string) can be used for a new line.</p>\n<p>If <code>data</code> is not specified, it will be auto collected from series. For most of series, it will be collected from <a href=\"#series.name\">series.name</a> or the dimension name specified by <code>seriesName</code> of <a href=\"#series.encode\">series.encode</a>. For some types of series like <a href=\"#series-pie\">pie</a> and <a href=\"#series-funnel\">funnel</a>, it will be collected from the name field of <code>series.data</code>.</p>\n<p>If you need to set the style for a single item, you may also set the configuration of it. In this case, <code>name</code> attribute is used to represent name of <code>series</code>.</p>\n<p>Example:</p>\n<pre><code>data: [{\n name: 'series 1',\n // compulsorily set icon as a circle\n icon: 'circle',\n // set up the text in red\n textStyle: {\n color: 'red'\n }\n}]\n</code></pre>","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of legend, which should be the <code>name</code> value of a certain series. If it is a pie chart, legend name can also be the name of a single data item.</p>\n"},"icon":{"type":["string"],"description":"<p>Icon of the legend.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"textStyle":{"type":["Object"],"description":"<p>Text style of legend.</p>\n"}}}},"backgroundColor":{"type":["Color"],"description":"<p>Background color of legend, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>.</p>\n</blockquote>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of legend. Support the same color format as backgroundColor.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>Border width of legend.</p>\n","default":1},"borderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n<p><strong>Attention</strong>: This property works only if <code>show: true</code> is configured and <code>backgroundColor</code> is defined other than <code>transparent</code>.</p>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code>show: true</code> configured.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code>show: true</code> configured.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code>show: true</code> configured.</p>\n","default":0},"scrollDataIndex":{"type":["number"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>'scroll'</code>.</p>\n<p><code>dataIndex</code> of the left top most displayed item.</p>\n<p>Although the scrolling of legend items can be controlled by calling <code>setOption</code> and specifying this property, we suggest that do not controll legend in this way unless necessary (<code>setOption</code> might be time-consuming), but just use action <a href=\"api.html#action.legend.legendScroll\" target=\"_blank\">legendScroll</a> to do that.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":0},"pageButtonItemGap":{"type":["number"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>'scroll'</code>.</p>\n<p>The gap between page buttons and page info text.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":5},"pageButtonGap":{"type":["number"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>'scroll'</code>.</p>\n<p>The gap between page buttons and legend items.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":null},"pageButtonPosition":{"type":["string"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>'scroll'</code>.</p>\n<p>The position of page buttons and page info. Optional values:</p>\n<ul>\n<li><code>'start'</code>: on the left or top.</li>\n<li><code>'end'</code>: on the right or bottom.</li>\n</ul>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":"'end'"},"pageFormatter":{"type":["string","Function"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>'scroll'</code>.</p>\n<p>Page info formatter. It is <code>'{current}/{total}'</code> by default, where <code>{current}</code> is current page number (start from 1), and <code>{total}</code> is the total page number.</p>\n<p>If <code>pageFormatter</code> is a function, it should return a string. The parameters is:</p>\n<pre><code class=\"lang-js\">{\n current: number\n total: number\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":"'{current}/{total}'"},"pageIcons":{"type":["Object"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>'scroll'</code>.</p>\n<p>The icons of page buttons.</p>\n","properties":{"horizontal":{"type":["Array"],"description":"<p>The icons of page buttons when <a href=\"#legend.orient\">legend.orient</a> is <code>'horizontal'</code>.</p>\n<p>It should be an array, <code>[previous page button, next page button]</code>, <code>['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z']</code> by default.</p>\n<p>For the each item of the array,</p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"},"vertical":{"type":["Array"],"description":"<p>The icons of page buttons when <a href=\"#legend.orient\">legend.orient</a> is <code>'vertical'</code>.</p>\n<p>It should be an array, <code>[previous page button, next page button]</code>, <code>['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']</code> by default.</p>\n<p>For the each item of the array,</p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n"}}},"pageIconColor":{"type":["string"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>'scroll'</code>.</p>\n<p>The color of page buttons.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":"'#2f4554'"},"pageIconInactiveColor":{"type":["string"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>'scroll'</code>.</p>\n<p>The color of page buttons when they are inactive.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":"'#aaa'"},"pageIconSize":{"type":["number","Array"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>'scroll'</code>.</p>\n<p>The size of page buttons. It can be a number, or an array, like <code>[10, 3]</code>, represents <code>[width, height]</code>.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-legend&edit=1&reset=1\" target=\"_blank\">vertically scrollable legend</a> or <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=radar2&edit=1&reset=1\" target=\"_blank\">horizontally scrollable legend</a>.</p>\n","default":15},"pageTextStyle":{"type":["Object"],"description":"<p>It works when <a href=\"#legend.type\">legend.type</a> is <code>'scroll'</code>.</p>\n<p>The text style of page info.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>Whether to use animation when page scrolll.</p>\n"},"animationDurationUpdate":{"type":["number"],"description":"<p>Duration of the page scroll animation.</p>\n","default":800}}},"grid":{"type":["Object"],"description":"<p>Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed. <a href=\"#series-line\">Line chart</a>, <a href=\"#series-bar\">bar chart</a>, and <a href=\"#series-scatter\">scatter chart (bubble chart)</a> can be drawn in grid.</p>\n<p>In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But in ECharts 3, there is no limitation.</p>\n<p><strong>Following is an example of Anscombe Quartet:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-anscombe-quartet&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Whether to show the grid in rectangular coordinate.</p>\n","default":false},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between grid component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'10%'"},"top":{"type":["string","number"],"description":"<p>Distance between grid component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":60},"right":{"type":["string","number"],"description":"<p>Distance between grid component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":"'10%'"},"bottom":{"type":["string","number"],"description":"<p>Distance between grid component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":60},"width":{"type":["string","number"],"description":"<p>Width of grid component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of grid component. Adaptive by default.</p>\n","default":"'auto'"},"containLabel":{"type":["boolean"],"description":"<p>Whether the grid region contains <a href=\"#yAxis.axisLabel\">axis tick label</a> of axis.</p>\n<ul>\n<li>When containLabel is <code>false</code>:<ul>\n<li><code>grid.left</code> <code>grid.right</code> <code>grid.top</code> <code>grid.bottom</code> <code>grid.width</code> <code>grid.height</code> decide the location and size of the rectangle that is made of by xAxis and yAxis.</li>\n<li>Setting to <code>false</code> will help when multiple grids need to be aligned at their axes.</li>\n</ul>\n</li>\n<li>When containLabel is <code>true</code>:<ul>\n<li><code>grid.left</code> <code>grid.right</code> <code>grid.top</code> <code>grid.bottom</code> <code>grid.width</code> <code>grid.height</code> decide the location and size of the rectangle that contains the axes and the labels of the axes.</li>\n<li>Setting to <code>true</code> will help when the length of axis labels is dynamic and is hard to approximate. This will avoid labels from overflowing the container or overlapping other components.</li>\n</ul>\n</li>\n</ul>\n","default":false},"backgroundColor":{"type":["Color"],"description":"<p>Background color of grid, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>.</p>\n</blockquote>\n<p><strong>Attention</strong>: Works only if <code>show: true</code> is set.</p>\n","default":"'transparent'"},"borderColor":{"type":["Color"],"description":"<p>Border color of grid. Support the same color format as backgroundColor.</p>\n<p><strong>Attention</strong>: Works only if <code>show: true</code> is set.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>Border width of grid.</p>\n<p><strong>Attention</strong>: Works only if <code>show: true</code> is set.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n<p><strong>Attention</strong>: This property works only if <code>show: true</code> is configured and <code>backgroundColor</code> is defined other than <code>transparent</code>.</p>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code>show: true</code> configured.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code>show: true</code> configured.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code>show: true</code> configured.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code>series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'item'</code></p>\n<p> Triggered by data item, which is mainly used for charts that don't have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code>'axis'</code></p>\n<p> Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href=\"#grid\">grid</a> or <a href=\"#polar\">polar</a>. Also, you may assign axis with <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a>.</p>\n</li>\n<li><p><code>'none'</code></p>\n<p> Trigger nothing.</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>Configuration item for axis indicator.</p>\n<p><code>tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code>someAxis.axisPointer</code>. But in common cases, using <code>tooltip.axisPinter</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code>tooltip.axisPointer</code> has lower priority than that of <code>someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code>axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\" ></iframe>\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code>axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code>tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>。</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code>someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code>true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code>'axis'</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code>'cross'</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code>axis.axisPointer</code> will override <code>tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code>someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code>true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code>'cross'</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code>someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code>true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code>'none'</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code>true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'line'</code> line indicator.</p>\n</li>\n<li><p><code>'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code>'none'</code> no indicator displayed.</p>\n</li>\n<li><p><code>'cross'</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>The coordinate axis, which could be <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, or <code>'angle'</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>'2'</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: 'some text {value} some text</code>, where <code>{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code>function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code>{Object}</code> params: Including fields as follows:</p>\n<p><code>{Object}</code> params.value: current value of this axis. If <code>axis.type</code> is <code>'category'</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>'time'</code>, it is a timestamp.</p>\n<p><code>{Array.<Object>}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code>{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code>'x'</code>, <code>'y'</code>, and in polar it will be <code>'radius'</code>, <code>'angle'</code>.</p>\n<p><code>{number}</code> params.axisIndex: The index of the axis, for example, <code>0</code>,<code>1</code>, <code>2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // The current value of axisPointer\n axisValueLabel: 'text of value'\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // If axis.type is 'time'\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'line'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'shadow'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'cross'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":200},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"position":{"type":["string","Array"],"description":"<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},"xAxis":{"type":["Object"],"description":"<p>The x axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 x axis, one on the bottom and another on the top. <a href=\"#xAxis.offset\">offset</a> can be used to avoid overlap when you need to put more than two x axis.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis from showing.</p>\n","default":true},"gridIndex":{"type":["number"],"description":"<p>The index of grid which the x axis belongs to. Defaults to be in the first grid.</p>\n","default":0},"position":{"type":["string"],"description":"<p>The position of x axis.</p>\n<p>options:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>The first x axis in grid defaults to be on the bottom of the grid, and the second x axis is on the other side against the first x axis.</p>\n"},"offset":{"type":["number"],"description":"<p>Offset of x axis relative to default position. Useful when multiple x axis has same <a href=\"#xAxis.position\">position</a> value.</p>\n","default":0},"type":{"type":["string"],"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>'value'</code>\n Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>'category'</code>\n Category axis, suitable for discrete category data. Data should only be set via <a href=\"#xAxis.data\">data</a> for this type.</p>\n</li>\n<li><p><code>'time'</code>\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code>'log'</code>\n Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'category'"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code> or <code>'center'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>axis name font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code>boundaryGap</code> of category axis can be set to either <code>true</code> or <code>false</code>. Default value is set to be <code>true</code>, in which case <a href=\"#xAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#xAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code>boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#xAxis.min\">min</a> and <a href=\"#xAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: ['20%', '20%']\n</code></pre>\n"},"min":{"type":["number","string"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#xAxis.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code>true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#xAxis.min\">min</a> and <a href=\"#xAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#xAxis.type\">type</a> is 'time'), it can be set to be <code>3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#xAxis.type\">type</a> 'value' or 'time'.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#xAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#xAxis.min\">min</a> and <a href=\"#xAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#xAxis.type\">type</a>: 'time' axis. Logged value should be passed for <a href=\"#xAxis.type\">type</a>: 'log' axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#xAxis.type\">type</a>: 'log'.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code>true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n // Component type: xAxis, yAxis, radiusAxis, angleAxis\n // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n componentType: string,\n // Value on axis before being formatted.\n // Click on value label to trigger event.\n value: '',\n // Name of axis.\n // Click on laben name to trigger event.\n name: ''\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis line from showing.</p>\n","default":true},"onZero":{"type":["boolean"],"description":"<p>Specifies whether X or Y axis lies on the other's origin position, where value is 0 on axis. Valid only if the other axis is of value type, and contains 0 value.</p>\n","default":true},"onZeroAxisIndex":{"type":["number"],"description":"<p>When mutiple axes exists, this option can be used to specify which axis can be "onZero" to.</p>\n"},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be <code>'none'</code> by default, meaning no arrow for either end. If it is set to be <code>'arrow'</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>['none', 'arrow']</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code>boundaryGap</code> is set to be <code>true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- Overwrite color -->\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n // Formatted to be month/day; display year only in the first label\n var date = new Date(value);\n var texts = [(date.getMonth() + 1), date.getDate()];\n if (idx === 0) {\n texts.unshift(date.getYear());\n }\n return texts.join('/');\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#xAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>SplitLine of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the splitLine from showing.\n<code>value</code> type axes are shown by default, while <code>category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n lineStyle: {\n // Dark and light colors will be used in turns\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- overwrite color -->\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#xAxis.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#xAxis.type\">type</a> is not specified, but <code>axis.data</code> is specified, the <a href=\"#xAxis.type\">type</a> is auto set as <code>'category'</code>.</p>\n<p>If <a href=\"#xAxis.type\">type</a> is specified as <code>'category'</code>, but <code>axis.data</code> is not specified, <code>axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code>axis.data</code> provides then value range of the <code>'category'</code> axis. If it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n value: 'Monday',\n // Highlight Monday\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code>'axis'</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'line'</code> line indicator.</p>\n</li>\n<li><p><code>'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code>'none'</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>'2'</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: 'some text {value} some text</code>, where <code>{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code>function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code>{Object}</code> params: Including fields as follows:</p>\n<p><code>{Object}</code> params.value: current value of this axis. If <code>axis.type</code> is <code>'category'</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>'time'</code>, it is a timestamp.</p>\n<p><code>{Array.<Object>}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code>{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code>'x'</code>, <code>'y'</code>, and in polar it will be <code>'radius'</code>, <code>'angle'</code>.</p>\n<p><code>{number}</code> params.axisIndex: The index of the axis, for example, <code>0</code>,<code>1</code>, <code>2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // The current value of axisPointer\n axisValueLabel: 'text of value'\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // If axis.type is 'time'\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'line'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'shadow'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code>value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code>'show'</code> 和 <code>'hide'</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code>true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&edit=1&reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code>[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p>{ target: partial-axis-interval }}\nInterval of , which is available in category axis. is set to be the same as <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in x axis.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in x axis, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":0}}},"yAxis":{"type":["Object"],"description":"<p>The y axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 y axis, one on the left and another on the right. <a href=\"#yAxis.offset\">offset</a> can be used to avoid overlap when you need to put more than two y axis.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis from showing.</p>\n","default":true},"gridIndex":{"type":["number"],"description":"<p>The index of grid which the y axis belongs to. Defaults to be in the first grid.</p>\n","default":0},"position":{"type":["string"],"description":"<p>the position of y axis.</p>\n<p>options:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>The first y axis in grid defaults to be the left (<code>'left'</code>) of the grid, and the second y axis is on the other side against the first y axis.</p>\n"},"offset":{"type":["number"],"description":"<p>Offset of y axis relative to default position. Useful when multiple y axis has same <a href=\"#yAxis.position\">position</a> value.</p>\n","default":0},"type":{"type":["string"],"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>'value'</code>\n Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>'category'</code>\n Category axis, suitable for discrete category data. Data should only be set via <a href=\"#yAxis.data\">data</a> for this type.</p>\n</li>\n<li><p><code>'time'</code>\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code>'log'</code>\n Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'value'"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code> or <code>'center'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>axis name font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code>boundaryGap</code> of category axis can be set to either <code>true</code> or <code>false</code>. Default value is set to be <code>true</code>, in which case <a href=\"#yAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#yAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code>boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#yAxis.min\">min</a> and <a href=\"#yAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: ['20%', '20%']\n</code></pre>\n"},"min":{"type":["number","string"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#yAxis.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code>true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#yAxis.min\">min</a> and <a href=\"#yAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#yAxis.type\">type</a> is 'time'), it can be set to be <code>3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#yAxis.type\">type</a> 'value' or 'time'.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#yAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#yAxis.min\">min</a> and <a href=\"#yAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#yAxis.type\">type</a>: 'time' axis. Logged value should be passed for <a href=\"#yAxis.type\">type</a>: 'log' axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#yAxis.type\">type</a>: 'log'.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code>true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n // Component type: xAxis, yAxis, radiusAxis, angleAxis\n // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n componentType: string,\n // Value on axis before being formatted.\n // Click on value label to trigger event.\n value: '',\n // Name of axis.\n // Click on laben name to trigger event.\n name: ''\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis line from showing.</p>\n","default":true},"onZero":{"type":["boolean"],"description":"<p>Specifies whether X or Y axis lies on the other's origin position, where value is 0 on axis. Valid only if the other axis is of value type, and contains 0 value.</p>\n","default":true},"onZeroAxisIndex":{"type":["number"],"description":"<p>When mutiple axes exists, this option can be used to specify which axis can be "onZero" to.</p>\n"},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be <code>'none'</code> by default, meaning no arrow for either end. If it is set to be <code>'arrow'</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>['none', 'arrow']</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code>boundaryGap</code> is set to be <code>true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- Overwrite color -->\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n // Formatted to be month/day; display year only in the first label\n var date = new Date(value);\n var texts = [(date.getMonth() + 1), date.getDate()];\n if (idx === 0) {\n texts.unshift(date.getYear());\n }\n return texts.join('/');\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#yAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>SplitLine of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the splitLine from showing.\n<code>value</code> type axes are shown by default, while <code>category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n lineStyle: {\n // Dark and light colors will be used in turns\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- overwrite color -->\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#yAxis.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#yAxis.type\">type</a> is not specified, but <code>axis.data</code> is specified, the <a href=\"#yAxis.type\">type</a> is auto set as <code>'category'</code>.</p>\n<p>If <a href=\"#yAxis.type\">type</a> is specified as <code>'category'</code>, but <code>axis.data</code> is not specified, <code>axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code>axis.data</code> provides then value range of the <code>'category'</code> axis. If it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n value: 'Monday',\n // Highlight Monday\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code>'axis'</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'line'</code> line indicator.</p>\n</li>\n<li><p><code>'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code>'none'</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>'2'</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: 'some text {value} some text</code>, where <code>{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code>function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code>{Object}</code> params: Including fields as follows:</p>\n<p><code>{Object}</code> params.value: current value of this axis. If <code>axis.type</code> is <code>'category'</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>'time'</code>, it is a timestamp.</p>\n<p><code>{Array.<Object>}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code>{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code>'x'</code>, <code>'y'</code>, and in polar it will be <code>'radius'</code>, <code>'angle'</code>.</p>\n<p><code>{number}</code> params.axisIndex: The index of the axis, for example, <code>0</code>,<code>1</code>, <code>2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // The current value of axisPointer\n axisValueLabel: 'text of value'\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // If axis.type is 'time'\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'line'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'shadow'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code>value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code>'show'</code> 和 <code>'hide'</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code>true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&edit=1&reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code>[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p>{ target: partial-axis-interval }}\nInterval of , which is available in category axis. is set to be the same as <a href=\"#yAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in y axis.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in y axis, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":0}}},"polar":{"type":["Object"],"description":"<p>Polar coordinate can be used in scatter and line chart. Every polar coordinate has an <a href=\"#angleAxis\">angleAxis</a> and a <a href=\"#radiusAxis\">radiusAxis</a>.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-polar-punchCard&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"center":{"type":["Array"],"description":"<p>Center position of Polar coordinate, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: ['50%', '50%']\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"<p>Radius of Polar coordinate. Value can be:</p>\n<ul>\n<li><code>number</code>: Specify outside radius directly.</li>\n<li><code>string</code>: For example, <code>'20%'</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</li>\n<li><code>Array.<number|string></code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</li>\n</ul>\n"},"tooltip":{"type":["*"],"description":"<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code>series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'item'</code></p>\n<p> Triggered by data item, which is mainly used for charts that don't have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code>'axis'</code></p>\n<p> Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href=\"#grid\">grid</a> or <a href=\"#polar\">polar</a>. Also, you may assign axis with <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a>.</p>\n</li>\n<li><p><code>'none'</code></p>\n<p> Trigger nothing.</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>Configuration item for axis indicator.</p>\n<p><code>tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code>someAxis.axisPointer</code>. But in common cases, using <code>tooltip.axisPinter</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code>tooltip.axisPointer</code> has lower priority than that of <code>someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code>axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\" ></iframe>\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code>axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code>tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>。</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code>someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code>true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code>'axis'</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code>'cross'</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code>axis.axisPointer</code> will override <code>tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code>someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code>true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code>'cross'</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code>someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code>true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code>'none'</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code>true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'line'</code> line indicator.</p>\n</li>\n<li><p><code>'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code>'none'</code> no indicator displayed.</p>\n</li>\n<li><p><code>'cross'</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>The coordinate axis, which could be <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, or <code>'angle'</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>'2'</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: 'some text {value} some text</code>, where <code>{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code>function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code>{Object}</code> params: Including fields as follows:</p>\n<p><code>{Object}</code> params.value: current value of this axis. If <code>axis.type</code> is <code>'category'</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>'time'</code>, it is a timestamp.</p>\n<p><code>{Array.<Object>}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code>{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code>'x'</code>, <code>'y'</code>, and in polar it will be <code>'radius'</code>, <code>'angle'</code>.</p>\n<p><code>{number}</code> params.axisIndex: The index of the axis, for example, <code>0</code>,<code>1</code>, <code>2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // The current value of axisPointer\n axisValueLabel: 'text of value'\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // If axis.type is 'time'\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'line'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'shadow'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'cross'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":200},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"position":{"type":["string","Array"],"description":"<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},"radiusAxis":{"type":["Object"],"description":"<p>Radial axis of polar coordinate.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"polarIndex":{"type":["number"],"description":"<p>Index of radial axis in polor coordinate. It's the first axis by default.</p>\n","default":0},"type":{"type":["string"],"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>'value'</code>\n Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>'category'</code>\n Category axis, suitable for discrete category data. Data should only be set via <a href=\"#radiusAxis.data\">data</a> for this type.</p>\n</li>\n<li><p><code>'time'</code>\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code>'log'</code>\n Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'value'"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code> or <code>'center'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>axis name font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code>boundaryGap</code> of category axis can be set to either <code>true</code> or <code>false</code>. Default value is set to be <code>true</code>, in which case <a href=\"#radiusAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#radiusAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code>boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#radiusAxis.min\">min</a> and <a href=\"#radiusAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: ['20%', '20%']\n</code></pre>\n"},"min":{"type":["number","string"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#radiusAxis.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code>true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#radiusAxis.min\">min</a> and <a href=\"#radiusAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#radiusAxis.type\">type</a> is 'time'), it can be set to be <code>3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#radiusAxis.type\">type</a> 'value' or 'time'.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#radiusAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#radiusAxis.min\">min</a> and <a href=\"#radiusAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#radiusAxis.type\">type</a>: 'time' axis. Logged value should be passed for <a href=\"#radiusAxis.type\">type</a>: 'log' axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#radiusAxis.type\">type</a>: 'log'.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code>true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n // Component type: xAxis, yAxis, radiusAxis, angleAxis\n // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n componentType: string,\n // Value on axis before being formatted.\n // Click on value label to trigger event.\n value: '',\n // Name of axis.\n // Click on laben name to trigger event.\n name: ''\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be <code>'none'</code> by default, meaning no arrow for either end. If it is set to be <code>'arrow'</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>['none', 'arrow']</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code>boundaryGap</code> is set to be <code>true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- Overwrite color -->\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n // Formatted to be month/day; display year only in the first label\n var date = new Date(value);\n var texts = [(date.getMonth() + 1), date.getDate()];\n if (idx === 0) {\n texts.unshift(date.getYear());\n }\n return texts.join('/');\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#radiusAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>SplitLine of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the splitLine from showing.\n<code>value</code> type axes are shown by default, while <code>category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n lineStyle: {\n // Dark and light colors will be used in turns\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- overwrite color -->\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#radiusAxis.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#radiusAxis.type\">type</a> is not specified, but <code>axis.data</code> is specified, the <a href=\"#radiusAxis.type\">type</a> is auto set as <code>'category'</code>.</p>\n<p>If <a href=\"#radiusAxis.type\">type</a> is specified as <code>'category'</code>, but <code>axis.data</code> is not specified, <code>axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code>axis.data</code> provides then value range of the <code>'category'</code> axis. If it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n value: 'Monday',\n // Highlight Monday\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code>'axis'</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'line'</code> line indicator.</p>\n</li>\n<li><p><code>'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code>'none'</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>'2'</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: 'some text {value} some text</code>, where <code>{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code>function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code>{Object}</code> params: Including fields as follows:</p>\n<p><code>{Object}</code> params.value: current value of this axis. If <code>axis.type</code> is <code>'category'</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>'time'</code>, it is a timestamp.</p>\n<p><code>{Array.<Object>}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code>{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code>'x'</code>, <code>'y'</code>, and in polar it will be <code>'radius'</code>, <code>'angle'</code>.</p>\n<p><code>{number}</code> params.axisIndex: The index of the axis, for example, <code>0</code>,<code>1</code>, <code>2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // The current value of axisPointer\n axisValueLabel: 'text of value'\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // If axis.type is 'time'\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'line'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'shadow'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code>value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code>'show'</code> 和 <code>'hide'</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code>true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&edit=1&reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code>[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p>{ target: partial-axis-interval }}\nInterval of , which is available in category axis. is set to be the same as <a href=\"#radiusAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in Radial axis.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in Radial axis, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":0}}},"angleAxis":{"type":["Object"],"description":"<p>The angle axis in Polar Coordinate.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"polarIndex":{"type":["number"],"description":"<p>The index of angle axis in Polar Coordinate. The first axis is used by default.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>Starting angle of axis. 90 degrees by default, standing for top position of center. 0 degree stands for right position of center.</p>\n<p>The following shows an example with startAngle of 45 deg.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/polar-start-angle&edit=1&reset=1\" width=\"400\" height=\"400\" ></iframe>\n\n\n","default":90},"clockwise":{"type":["boolean"],"description":"<p>Whether the positive position of axis is in clockwise. True for clockwise by default.</p>\n<p>The following shows an example with clockwise as <code>false</code>.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/polar-anticlockwise&edit=1&reset=1\" width=\"400\" height=\"400\" ></iframe>\n\n\n\n\n","default":true},"type":{"type":["string"],"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>'value'</code>\n Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>'category'</code>\n Category axis, suitable for discrete category data. Data should only be set via <a href=\"#angleAxis.data\">data</a> for this type.</p>\n</li>\n<li><p><code>'time'</code>\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code>'log'</code>\n Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'category'"},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code>boundaryGap</code> of category axis can be set to either <code>true</code> or <code>false</code>. Default value is set to be <code>true</code>, in which case <a href=\"#angleAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#angleAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code>boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#angleAxis.min\">min</a> and <a href=\"#angleAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: ['20%', '20%']\n</code></pre>\n"},"min":{"type":["number","string"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#angleAxis.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code>true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#angleAxis.min\">min</a> and <a href=\"#angleAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#angleAxis.type\">type</a> is 'time'), it can be set to be <code>3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#angleAxis.type\">type</a> 'value' or 'time'.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#angleAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#angleAxis.min\">min</a> and <a href=\"#angleAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#angleAxis.type\">type</a>: 'time' axis. Logged value should be passed for <a href=\"#angleAxis.type\">type</a>: 'log' axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#angleAxis.type\">type</a>: 'log'.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code>true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n // Component type: xAxis, yAxis, radiusAxis, angleAxis\n // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n componentType: string,\n // Value on axis before being formatted.\n // Click on value label to trigger event.\n value: '',\n // Name of axis.\n // Click on laben name to trigger event.\n name: ''\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be <code>'none'</code> by default, meaning no arrow for either end. If it is set to be <code>'arrow'</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>['none', 'arrow']</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code>boundaryGap</code> is set to be <code>true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- Overwrite color -->\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n // Formatted to be month/day; display year only in the first label\n var date = new Date(value);\n var texts = [(date.getMonth() + 1), date.getDate()];\n if (idx === 0) {\n texts.unshift(date.getYear());\n }\n return texts.join('/');\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#angleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>SplitLine of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the splitLine from showing.\n<code>value</code> type axes are shown by default, while <code>category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n lineStyle: {\n // Dark and light colors will be used in turns\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- overwrite color -->\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#angleAxis.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#angleAxis.type\">type</a> is not specified, but <code>axis.data</code> is specified, the <a href=\"#angleAxis.type\">type</a> is auto set as <code>'category'</code>.</p>\n<p>If <a href=\"#angleAxis.type\">type</a> is specified as <code>'category'</code>, but <code>axis.data</code> is not specified, <code>axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code>axis.data</code> provides then value range of the <code>'category'</code> axis. If it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n value: 'Monday',\n // Highlight Monday\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code>'axis'</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'line'</code> line indicator.</p>\n</li>\n<li><p><code>'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code>'none'</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>'2'</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: 'some text {value} some text</code>, where <code>{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code>function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code>{Object}</code> params: Including fields as follows:</p>\n<p><code>{Object}</code> params.value: current value of this axis. If <code>axis.type</code> is <code>'category'</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>'time'</code>, it is a timestamp.</p>\n<p><code>{Array.<Object>}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code>{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code>'x'</code>, <code>'y'</code>, and in polar it will be <code>'radius'</code>, <code>'angle'</code>.</p>\n<p><code>{number}</code> params.axisIndex: The index of the axis, for example, <code>0</code>,<code>1</code>, <code>2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // The current value of axisPointer\n axisValueLabel: 'text of value'\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // If axis.type is 'time'\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'line'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'shadow'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code>value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code>'show'</code> 和 <code>'hide'</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code>true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&edit=1&reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code>[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p>{ target: partial-axis-interval }}\nInterval of , which is available in category axis. is set to be the same as <a href=\"#angleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":0}}}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in Angle Axis.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in Angle Axis, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":0}}},"radar":{"type":["Object"],"description":"<p>Coordinate for <a href=\"#series-radar\">radar charts</a>. This component is equal to the polar component in ECharts 2. Because the polar component in the echarts 3 is reconstructed to be the standard polar coordinate component, this component is renamed to be radar to avoid confusion.</p>\n<p>Radar chart coordinate is different from polar coordinate, in that every axis indicator of the radar chart coordinate is an individual dimension. The style of indicator coordinate axis could be configured through the following configuration items, including <a href=\"#radar.name\">name</a>, <a href=\"#radar.axisLine\">axisLine</a>, <a href=\"#radar.axisTick\">axisTick</a>, <a href=\"#radar.axisLabel\">axisLabel</a>, <a href=\"#radar.splitLine\">splitLine</a>, <a href=\"#radar.splitArea\">splitArea</a>.</p>\n<p>Here is a custom example of radar component.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/radar&edit=1&reset=1\" width=\"400\" height=\"400\" ></iframe>\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"center":{"type":["Array"],"description":"<p>Center position of , the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: ['50%', '50%']\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"<p>Radius of . Value can be:</p>\n<ul>\n<li><code>number</code>: Specify outside radius directly.</li>\n<li><code>string</code>: For example, <code>'20%'</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</li>\n<li><code>Array.<number|string></code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</li>\n</ul>\n","default":"75%"},"startAngle":{"type":["number"],"description":"<p>The start angle of coordinate, which is the angle of the first indicator axis.</p>\n","default":90},"name":{"type":["Object"],"description":"<p>Name of radar chart.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to display the indicator's name.</p>\n","default":true},"formatter":{"type":["string","Function"],"description":"<p>The formatter of indicator's name, in which the string and callback function are supported. See the following example:</p>\n<pre><code class=\"lang-js\">// using string template, the template variable should be the indicator's name {value}\nformatter: '【{value}】'\n// using callback function, the first parameter is the indicator's name, and the second parameter id the indicator's cinfiguration item\nformatter: function (value, indicator) {\n return '【' + value + '】';\n}\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#333'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Distance between the indicator's name and axis.</p>\n","default":15},"splitNumber":{"type":["number"],"description":"<p>Segments of indicator axis.</p>\n","default":5},"shape":{"type":["string"],"description":"<p>Radar render type, in which <code>'polygon'</code> and <code>'circle'</code> are supported.</p>\n","default":"'polygon'"},"scale":{"type":["boolean"],"description":"<p>Whether to prevent calculating the scaling relative to zero. If it is set to be <code>true</code>, the coordinate tick would not compulsorily contain zero value, which is usually useful in scatter diagram of double numerical values axis.</p>\n","default":false},"silent":{"type":["boolean"],"description":"<p>Set this to <code>true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n // Component type: xAxis, yAxis, radiusAxis, angleAxis\n // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n componentType: string,\n // Value on axis before being formatted.\n // Click on value label to trigger event.\n value: '',\n // Name of axis.\n // Click on laben name to trigger event.\n name: ''\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be <code>'none'</code> by default, meaning no arrow for either end. If it is set to be <code>'arrow'</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>['none', 'arrow']</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis tick from showing.</p>\n","default":true},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- Overwrite color -->\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis label from appearing.</p>\n","default":true},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n // Formatted to be month/day; display year only in the first label\n var date = new Date(value);\n var texts = [(date.getMonth() + 1), date.getDate()];\n if (idx === 0) {\n texts.unshift(date.getYear());\n }\n return texts.join('/');\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>SplitLine of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the splitLine from showing.\n<code>value</code> type axes are shown by default, while <code>category</code> type axes are hidden.</p>\n","default":true,"properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n lineStyle: {\n // Dark and light colors will be used in turns\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- overwrite color -->\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to show the splitArea.</p>\n","default":true},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"indicator":{"type":["Array"],"description":"<p>Indicator of radar chart, which is used to assign multiple variables(dimensions) in radar chart. Here is the example.</p>\n<pre><code class=\"lang-js\">indicator: [\n { name: 'Sales (sales) ', max: 6500},\n { name: 'Administration (Administration) ', max: 16000, color: 'red'}, // Set the indicator as 'red'\n { name: 'Information Technology (Information Technology) ', max: 30000},\n { name: 'Customer Support (Customer Support) ', max: 38000},\n { name: 'Development (Development) ', max: 52000},\n { name: 'Marketing (Marketing) ', max: 25000}\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Indicator's name.</p>\n"},"max":{"type":["number"],"description":"<p>The maximum value of indicator. It is an optional configuration, but we recommend to set it manually.</p>\n"},"min":{"type":["number"],"description":"<p>The minimum value of indicator. It it an optional configuration, with default value of 0.</p>\n"}}}},"color":{"type":["string"],"description":"<p>Specfy a color the the indicator.</p>\n"}}},"dataZoom":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><strong>dataZoomInside</strong></p>\n<p>Data zoom component of <em>inside</em> type.</p>\n<p>Refer to <a href=\"#dataZoom\">dataZoom</a> for more information.</p>\n<p>The <em>inside</em> means it's inside the coordinates.</p>\n<ul>\n<li>Translation: data area can be translated when moving in coordinates.</li>\n<li>Scaling:<ul>\n<li>PC: when mouse rolls (similar with touch pad) in coordinates.</li>\n<li>Mobile: when touches and moved with two fingers in coordinates on touch screens.</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'inside'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"disabled":{"type":["boolean"],"description":"<p>Whether disable inside zoom.</p>\n","default":false},"xAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#xAxis\">xAxis</a> is/are controlled by the <code>dataZoom-inside</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code>xAxis</code> that parallel to <code>dataZoom</code> are controlled when <a href=\"#dataZoom-inside.orient\">dataZoom-inside.orient</a> is set as <code>'horizontal'</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code>number</code>, one axis is controlled, while if it is set as an <code>Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n xAxis: [\n {...}, // The first xAxis\n {...}, // The second xAxis\n {...}, // The third xAxis\n {...} // The fourth xAxis\n ],\n dataZoom: [\n { // The first dataZoom component\n xAxisIndex: [0, 2] // Indicates that this dataZoom component\n // controls the first and the third xAxis\n },\n { // The second dataZoom component\n xAxisIndex: 3 // indicates that this dataZoom component\n // controls the fourth xAxis\n }\n ]\n}\n</code></pre>\n","default":null},"yAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#yAxis\">yAxis</a> is/are controlled by the <code>dataZoom-inside</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code>yAxis</code> that parallel to <code>dataZoom</code> are controlled when <a href=\"#dataZoom-inside.orient\">dataZoom-inside.orient</a> is set as <code>'vertical'</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code>number</code>, one axis is controlled, while if it is set as an <code>Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n yAxis: [\n {...}, // The first yAxis\n {...}, // The second yAxis\n {...}, // The third yAxis\n {...} // The fourth yAxis\n ],\n dataZoom: [\n { // The first dataZoom component\n yAxisIndex: [0, 2] // Indicates that this dataZoom component\n // controls the first and the third yAxis\n },\n { // The second dataZoom component\n yAxisIndex: 3 // indicates that this dataZoom component\n // controls the fourth yAxis\n }\n ]\n}\n</code></pre>\n","default":null},"radiusAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#radiusAxis\">radiusAxis</a> is/are controlled by the <code>dataZoom-inside</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code>number</code>, one axis is controlled, while if it is set as an <code>Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n radiusAxis: [\n {...}, // The first radiusAxis\n {...}, // The second radiusAxis\n {...}, // The third radiusAxis\n {...} // The fourth radiusAxis\n ],\n dataZoom: [\n { // The first dataZoom component\n radiusAxisIndex: [0, 2] // Indicates that this dataZoom component\n // controls the first and the third radiusAxis\n },\n { // The second dataZoom component\n radiusAxisIndex: 3 // indicates that this dataZoom component\n // controls the fourth radiusAxis\n }\n ]\n}\n</code></pre>\n","default":null},"angleAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#angleAxis\">angleAxis</a> is/are controlled by the <code>dataZoom-inside</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code>number</code>, one axis is controlled, while if it is set as an <code>Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n angleAxis: [\n {...}, // The first angleAxis\n {...}, // The second angleAxis\n {...}, // The third angleAxis\n {...} // The fourth angleAxis\n ],\n dataZoom: [\n { // The first dataZoom component\n angleAxisIndex: [0, 2] // Indicates that this dataZoom component\n // controls the first and the third angleAxis\n },\n { // The second dataZoom component\n angleAxisIndex: 3 // indicates that this dataZoom component\n // controls the fourth angleAxis\n }\n ]\n}\n</code></pre>\n","default":null},"filterMode":{"type":["string"],"description":"<p>Generally <code>dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>'filter': data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>'weakFilter': data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>'empty': data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>'none': Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code>filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code>xAxis</code> or only <code>yAxis</code> is controlled by <code>dataZoom</code>, <code>filterMode: 'filter'</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code>xAxis</code> and <code>yAxis</code> are operated by <code>dataZoom</code>:</p>\n<ul>\n<li><p>If <code>xAxis</code> and <code>yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code>'value'</code>), they should be set to be <code>filterMode: 'empty'</code>.</p>\n</li>\n<li><p>If <code>xAxis</code> is the main axis and <code>yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code>dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code>dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code>xAxis</code> should be set to be <code>fiterMode: 'filter'</code>, while <code>yAxis</code> shoule be set to be <code>fiterMode: 'empty'</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demostrated by the sample:</p>\n<pre><code class=\"lang-javascript\">option = {\n dataZoom: [\n {\n id: 'dataZoomX',\n type: 'slider',\n xAxisIndex: [0],\n filterMode: 'filter'\n },\n {\n id: 'dataZoomY',\n type: 'slider',\n yAxisIndex: [0],\n filterMode: 'empty'\n }\n ],\n xAxis: {type: 'value'},\n yAxis: {type: 'value'},\n series{\n type: 'bar',\n data: [\n // The first column corresponds to xAxis,\n // and the second coloum corresponds to yAxis.\n [12, 24, 36],\n [90, 80, 70],\n [3, 9, 27],\n [1, 11, 111]\n ]\n }\n}\n</code></pre>\n<p>In the sample above, <code>dataZoomX</code> is set as <code>filterMode: 'filter'</code>. When use drags <code>dataZoomX</code> (do not touch <code>dataZoomY</code>) and the valueWindow of <code>xAxis</code> is changed to <code>[2, 50]</code> consequently, <code>dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n [12, 24, 36],\n // [90, 80, 70] This item is filtered, as 90 is out of the window.\n [3, 9, 27]\n // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code>24</code>, <code>80</code>, <code>9</code>, <code>11</code>. After filtering, only <code>24</code> and <code>9</code> are left. Then the extent of <code>yAxis</code> is adjusted to adapt the two values (if <code>yAxis.min</code> and <code>yAxis.man</code> are not set).</p>\n<p>So <code>filterMode: 'filter'</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let's review the sample from the beginning, <code>dataZoomY</code> is set as <code>filterMode: 'empty'</code>. So if user drags <code>dataZoomY</code> (do not touch <code>dataZoomX</code>) and its window is changed to <code>[10, 60]</code> consequently, <code>dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but sill hold the place). The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n [12, 24, 36],\n [90, NaN, 70], // Set to NaN\n [3, NaN, 27], // Set to NaN\n [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first colum (i.e., <code>12</code>, <code>90</code>, <code>3</code>, <code>1</code>, which corresponds to <code>xAxis</code>), will not be changed at all. So dragging <code>yAxis</code> will not change extent of <code>xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n\n\n","default":"'filter'"},"start":{"type":["number"],"description":"<p>The start percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> and <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> define the window of the data in <strong>percent</strong> form.</p>\n","default":0},"end":{"type":["number"],"description":"<p>The end percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> and <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> define the window of the data in <strong>percent</strong> form.</p>\n","default":100},"startValue":{"type":["number","string","Date"],"description":"<p>The start absolute value of the window, not works when <a href=\"#dataZoom-inside.start\">dataZoom-inside.start</a> is set.</p>\n<p><a href=\"#dataZoom-inside.startValue\">dataZoom-inside.startValue</a> and <a href=\"#dataZoom-inside.endValue\">dataZoom-inside.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code>category</code>, <code>startValue</code> could be set as <code>index</code> of the array of <code>axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n","default":null},"endValue":{"type":["number","string","Date"],"description":"<p>The end absolute value of the window, not works when <a href=\"#dataZoom-inside.end\">dataZoom-inside.end</a> is set.</p>\n<p><a href=\"#dataZoom-inside.startValue\">dataZoom-inside.startValue</a> and <a href=\"#dataZoom-inside.endValue\">dataZoom-inside.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code>category</code>, <code>startValue</code> could be set as <code>index</code> of the array of <code>axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n","default":null},"minSpan":{"type":["number"],"description":"<p>Used to restrict minimal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-inside.minValueSpan\">dataZoom-inside.minValueSpan</a> is set, <code>minSpan</code> does not work any more.</p>\n","default":null},"maxSpan":{"type":["number"],"description":"<p>Used to restrict maximal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-inside.maxValueSpan\">dataZoom-inside.maxValueSpan</a> is set, <code>maxSpan</code> does not work any more.</p>\n","default":null},"minValueSpan":{"type":["number","string","Date"],"description":"<p>Used to restrict minimal window size.</p>\n<p>For example:\nIn time axis it can be set as <code>3600 * 24 * 1000 * 5</code> to represent "5 day".\nIn category axis it can be set as <code>5</code> to represent 5 categories.</p>\n","default":null},"maxValueSpan":{"type":["number","string","Date"],"description":"<p>Used to restrict maximal window size.</p>\n<p>For example:\nIn time axis it can be set as <code>3600 * 24 * 1000 * 5</code> to represent "5 day".\nIn category axis it can be set as <code>5</code> to represent 5 categories.</p>\n","default":null},"orient":{"type":["string"],"description":"<p>Specify whether the layout of <code>dataZoom</code> component is horizontal or vertical. What's more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.</p>\n<p>Valid values:</p>\n<ul>\n<li><p><code>'horizontal'</code>: horizontal.</p>\n</li>\n<li><p><code>'vertical'</code>: vertical.</p>\n</li>\n</ul>\n","default":null},"zoomLock":{"type":["boolean"],"description":"<p>Specify whether to lock the size of window (selected area).</p>\n<p>When set as <code>true</code>, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is avialable but zoom is not.</p>\n","default":false},"throttle":{"type":["number"],"description":"<p>Specify the frame rate of views refreshing, with unit millisecond (ms).</p>\n<p>If <a href=\"#animation\">animation</a> set as <code>true</code> and <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as bigger than <code>0</code>, you can keep <code>throttle</code> as the default value <code>100</code> (or set it as a value bigger than <code>0</code>), otherwise it might be not smooth when dragging.</p>\n<p>If <a href=\"#animation\">animation</a> set as <code>false</code> or <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as <code>0</code>, and data size is not very large, and it seems to be not smooth when dragging, you can set <code>throttle</code> as <code>0</code> to improve that.</p>\n","default":100},"rangeMode":{"type":["Array"],"description":"<p>For example <code>rangeMode: ['value', 'percent']</code> means that use absolute value in <code>start</code> and percent value in <code>end</code>.</p>\n<p>Optional value: <code>'value'</code>, <code>'percent'</code>.</p>\n"},"zoomOnMouseWheel":{"type":["boolean"],"description":"<p>How to trigger zoom. Optional values:</p>\n<ul>\n<li><code>true</code>：Mouse wheel triggers zoom.</li>\n<li><code>false</code>：Mouse wheel can not triggers zoom.</li>\n<li><code>'shift'</code>：Holding <code>shift</code> and mouse wheel triggers zoom.</li>\n<li><code>'ctrl'</code>：Holding <code>ctrl</code> and mouse wheel triggers zoom.</li>\n<li><code>'alt'</code>：Holding <code>alt</code> and mouse wheel triggers zoom.</li>\n</ul>\n","default":true},"moveOnMouseMove":{"type":["boolean"],"description":"<p>How to trigger data window move. Optional values:</p>\n<ul>\n<li><code>true</code>：Mouse move triggers data window move.</li>\n<li><code>false</code>：Mouse move can not triggers data window move.</li>\n<li><code>'shift'</code>：Holding <code>shift</code> and mouse move triggers data window move.</li>\n<li><code>'ctrl'</code>：Holding <code>ctrl</code> and mouse move triggers data window move.</li>\n<li><code>'alt'</code>：Holding <code>alt</code> and mouse move triggers data window move.</li>\n</ul>\n","default":true},"moveOnMouseWheel":{"type":["boolean"],"description":"<p>How to trigger data window move. Optional values:</p>\n<ul>\n<li><code>true</code>：Mouse wheel triggers data window move.</li>\n<li><code>false</code>：Mouse wheel can not triggers data window move.</li>\n<li><code>'shift'</code>：Holding <code>shift</code> and mouse wheel triggers data window move.</li>\n<li><code>'ctrl'</code>：Holding <code>ctrl</code> and mouse wheel triggers data window move.</li>\n<li><code>'alt'</code>：Holding <code>alt</code> and mouse wheel triggers data window move.</li>\n</ul>\n","default":false},"preventDefaultMouseMove":{"type":["boolean"],"description":"<p>Whether to prevent default behavior of mouse move event.</p>\n","default":true}}},{"type":["Object"],"description":"<p><strong>dataZoomSlider</strong></p>\n<p>(Please refer to the <a href=\"#dataZoom\">introduction of dataZoom</a>.)</p>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'slider'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Whether to show the component. If is set to be <code>false</code>, it will not show, but its data filtering function still works.</p>\n","default":true},"backgroundColor":{"type":["Color"],"description":"<p>The background color of the component.</p>\n","default":"'rgba(47,69,84,0)'"},"dataBackground":{"type":["Object"],"description":"<p>The style of data shadow.</p>\n","properties":{"lineStyle":{"type":["Object"],"description":"<p>Line style of shadow</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#2f4554"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0.5},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.3}}},"areaStyle":{"type":["Object"],"description":"<p>Area style of shadow</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"rgba(47,69,84,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.3}}}}},"fillerColor":{"type":["Color"],"description":"<p>The color to fill selected area.</p>\n","default":"'rgba(47,69,84,0.25)'"},"borderColor":{"type":["Color"],"description":"<p>The color of border.</p>\n","default":"'#ddd'"},"handleIcon":{"type":["string"],"description":"<p>Icon shape of handle, which supports path string. Its default value is:</p>\n<pre><code class=\"lang-js\">'M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z'\n</code></pre>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>Refer to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=area-simple\" target=\"_blank\">area-simple example</a> for customized icon.</p>\n"},"handleSize":{"type":["number"],"description":"<p>The size of control handle. It can be in pixels, or in percentage relative to the width of dataZoom component. By default, it's the same as the width of dataZoom component.</p>\n","default":"'100%'"},"handleStyle":{"type":["Object"],"description":"<p>Style of handle. Please refer to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=area-simple\" target=\"_blank\">area-simple example</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#a7b7cc"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"labelPrecision":{"type":["number"],"description":"<p>Precision of label if in number form. By default, it is decided based on the number of data.</p>\n","default":"'auto'"},"labelFormatter":{"type":["string","Function"],"description":"<p>The formatter tool for the label.</p>\n<ul>\n<li><p>It is a template if in <code>string</code>. For instance, <code>aaaa{value}bbbb</code>, where <code>{value}</code> will be replaced by the value of actual data value.</p>\n</li>\n<li><p>It is a callback function if in <code>Function</code>. For example:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">/**\n * @param {*} value If axis.type is 'category', `value` is the index of axis.data.\n * else `value` is current value.\n * @param {strign} valueStr Inner formatted string.\n * @return {string} Returns the label formatted.\n */\nlabelFormatter: function (value, valueStr) {\n return 'aaa' + value + 'bbb';\n}\n</code></pre>\n","default":null},"showDetail":{"type":["boolean"],"description":"<p>Whether to show detail, that is, show the detailed data information when dragging.</p>\n","default":true},"showDataShadow":{"type":["string"],"description":"<p>Whether to show data shadow in <code>dataZoom-silder</code> component, to indicate the data tendency in brief.</p>\n","default":"'auto'"},"realtime":{"type":["boolean"],"description":"<p>Whether to update view while dragging. If it is set as <code>false</code>, the view will be updated only at the end of dragging.</p>\n","default":true},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>dataZoom text color.</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p>dataZoom font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>dataZoom font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>dataZoom font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>dataZoom font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"xAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#xAxis\">xAxis</a> is/are controlled by the <code>dataZoom-slider</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code>xAxis</code> that parallel to <code>dataZoom</code> are controlled when <a href=\"#dataZoom-slider.orient\">dataZoom-slider.orient</a> is set as <code>'horizontal'</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code>number</code>, one axis is controlled, while if it is set as an <code>Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n xAxis: [\n {...}, // The first xAxis\n {...}, // The second xAxis\n {...}, // The third xAxis\n {...} // The fourth xAxis\n ],\n dataZoom: [\n { // The first dataZoom component\n xAxisIndex: [0, 2] // Indicates that this dataZoom component\n // controls the first and the third xAxis\n },\n { // The second dataZoom component\n xAxisIndex: 3 // indicates that this dataZoom component\n // controls the fourth xAxis\n }\n ]\n}\n</code></pre>\n","default":null},"yAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#yAxis\">yAxis</a> is/are controlled by the <code>dataZoom-slider</code> when <a href=\"#grid\">catesian coordinate system</a> is used.</p>\n<p>By default the first <code>yAxis</code> that parallel to <code>dataZoom</code> are controlled when <a href=\"#dataZoom-slider.orient\">dataZoom-slider.orient</a> is set as <code>'vertical'</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code>number</code>, one axis is controlled, while if it is set as an <code>Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n yAxis: [\n {...}, // The first yAxis\n {...}, // The second yAxis\n {...}, // The third yAxis\n {...} // The fourth yAxis\n ],\n dataZoom: [\n { // The first dataZoom component\n yAxisIndex: [0, 2] // Indicates that this dataZoom component\n // controls the first and the third yAxis\n },\n { // The second dataZoom component\n yAxisIndex: 3 // indicates that this dataZoom component\n // controls the fourth yAxis\n }\n ]\n}\n</code></pre>\n","default":null},"radiusAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#radiusAxis\">radiusAxis</a> is/are controlled by the <code>dataZoom-slider</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code>number</code>, one axis is controlled, while if it is set as an <code>Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n radiusAxis: [\n {...}, // The first radiusAxis\n {...}, // The second radiusAxis\n {...}, // The third radiusAxis\n {...} // The fourth radiusAxis\n ],\n dataZoom: [\n { // The first dataZoom component\n radiusAxisIndex: [0, 2] // Indicates that this dataZoom component\n // controls the first and the third radiusAxis\n },\n { // The second dataZoom component\n radiusAxisIndex: 3 // indicates that this dataZoom component\n // controls the fourth radiusAxis\n }\n ]\n}\n</code></pre>\n","default":null},"angleAxisIndex":{"type":["number","Array"],"description":"<p>Specify which <a href=\"#angleAxis\">angleAxis</a> is/are controlled by the <code>dataZoom-slider</code> when <a href=\"#polar\">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code>number</code>, one axis is controlled, while if it is set as an <code>Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">option: {\n angleAxis: [\n {...}, // The first angleAxis\n {...}, // The second angleAxis\n {...}, // The third angleAxis\n {...} // The fourth angleAxis\n ],\n dataZoom: [\n { // The first dataZoom component\n angleAxisIndex: [0, 2] // Indicates that this dataZoom component\n // controls the first and the third angleAxis\n },\n { // The second dataZoom component\n angleAxisIndex: 3 // indicates that this dataZoom component\n // controls the fourth angleAxis\n }\n ]\n}\n</code></pre>\n","default":null},"filterMode":{"type":["string"],"description":"<p>Generally <code>dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>'filter': data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>'weakFilter': data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>'empty': data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>'none': Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code>filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code>xAxis</code> or only <code>yAxis</code> is controlled by <code>dataZoom</code>, <code>filterMode: 'filter'</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code>xAxis</code> and <code>yAxis</code> are operated by <code>dataZoom</code>:</p>\n<ul>\n<li><p>If <code>xAxis</code> and <code>yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code>'value'</code>), they should be set to be <code>filterMode: 'empty'</code>.</p>\n</li>\n<li><p>If <code>xAxis</code> is the main axis and <code>yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code>dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code>dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code>xAxis</code> should be set to be <code>fiterMode: 'filter'</code>, while <code>yAxis</code> shoule be set to be <code>fiterMode: 'empty'</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demostrated by the sample:</p>\n<pre><code class=\"lang-javascript\">option = {\n dataZoom: [\n {\n id: 'dataZoomX',\n type: 'slider',\n xAxisIndex: [0],\n filterMode: 'filter'\n },\n {\n id: 'dataZoomY',\n type: 'slider',\n yAxisIndex: [0],\n filterMode: 'empty'\n }\n ],\n xAxis: {type: 'value'},\n yAxis: {type: 'value'},\n series{\n type: 'bar',\n data: [\n // The first column corresponds to xAxis,\n // and the second coloum corresponds to yAxis.\n [12, 24, 36],\n [90, 80, 70],\n [3, 9, 27],\n [1, 11, 111]\n ]\n }\n}\n</code></pre>\n<p>In the sample above, <code>dataZoomX</code> is set as <code>filterMode: 'filter'</code>. When use drags <code>dataZoomX</code> (do not touch <code>dataZoomY</code>) and the valueWindow of <code>xAxis</code> is changed to <code>[2, 50]</code> consequently, <code>dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n [12, 24, 36],\n // [90, 80, 70] This item is filtered, as 90 is out of the window.\n [3, 9, 27]\n // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code>24</code>, <code>80</code>, <code>9</code>, <code>11</code>. After filtering, only <code>24</code> and <code>9</code> are left. Then the extent of <code>yAxis</code> is adjusted to adapt the two values (if <code>yAxis.min</code> and <code>yAxis.man</code> are not set).</p>\n<p>So <code>filterMode: 'filter'</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let's review the sample from the beginning, <code>dataZoomY</code> is set as <code>filterMode: 'empty'</code>. So if user drags <code>dataZoomY</code> (do not touch <code>dataZoomX</code>) and its window is changed to <code>[10, 60]</code> consequently, <code>dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but sill hold the place). The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n [12, 24, 36],\n [90, NaN, 70], // Set to NaN\n [3, NaN, 27], // Set to NaN\n [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first colum (i.e., <code>12</code>, <code>90</code>, <code>3</code>, <code>1</code>, which corresponds to <code>xAxis</code>), will not be changed at all. So dragging <code>yAxis</code> will not change extent of <code>xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n\n\n","default":"'filter'"},"start":{"type":["number"],"description":"<p>The start percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> and <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> define the window of the data in <strong>percent</strong> form.</p>\n","default":0},"end":{"type":["number"],"description":"<p>The end percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> and <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> define the window of the data in <strong>percent</strong> form.</p>\n","default":100},"startValue":{"type":["number","string","Date"],"description":"<p>The start absolute value of the window, not works when <a href=\"#dataZoom-slider.start\">dataZoom-slider.start</a> is set.</p>\n<p><a href=\"#dataZoom-slider.startValue\">dataZoom-slider.startValue</a> and <a href=\"#dataZoom-slider.endValue\">dataZoom-slider.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code>category</code>, <code>startValue</code> could be set as <code>index</code> of the array of <code>axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n","default":null},"endValue":{"type":["number","string","Date"],"description":"<p>The end absolute value of the window, not works when <a href=\"#dataZoom-slider.end\">dataZoom-slider.end</a> is set.</p>\n<p><a href=\"#dataZoom-slider.startValue\">dataZoom-slider.startValue</a> and <a href=\"#dataZoom-slider.endValue\">dataZoom-slider.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code>category</code>, <code>startValue</code> could be set as <code>index</code> of the array of <code>axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n","default":null},"minSpan":{"type":["number"],"description":"<p>Used to restrict minimal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-slider.minValueSpan\">dataZoom-slider.minValueSpan</a> is set, <code>minSpan</code> does not work any more.</p>\n","default":null},"maxSpan":{"type":["number"],"description":"<p>Used to restrict maximal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href=\"#dataZoom-slider.maxValueSpan\">dataZoom-slider.maxValueSpan</a> is set, <code>maxSpan</code> does not work any more.</p>\n","default":null},"minValueSpan":{"type":["number","string","Date"],"description":"<p>Used to restrict minimal window size.</p>\n<p>For example:\nIn time axis it can be set as <code>3600 * 24 * 1000 * 5</code> to represent "5 day".\nIn category axis it can be set as <code>5</code> to represent 5 categories.</p>\n","default":null},"maxValueSpan":{"type":["number","string","Date"],"description":"<p>Used to restrict maximal window size.</p>\n<p>For example:\nIn time axis it can be set as <code>3600 * 24 * 1000 * 5</code> to represent "5 day".\nIn category axis it can be set as <code>5</code> to represent 5 categories.</p>\n","default":null},"orient":{"type":["string"],"description":"<p>Specify whether the layout of <code>dataZoom</code> component is horizontal or vertical. What's more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.</p>\n<p>Valid values:</p>\n<ul>\n<li><p><code>'horizontal'</code>: horizontal.</p>\n</li>\n<li><p><code>'vertical'</code>: vertical.</p>\n</li>\n</ul>\n","default":null},"zoomLock":{"type":["boolean"],"description":"<p>Specify whether to lock the size of window (selected area).</p>\n<p>When set as <code>true</code>, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is avialable but zoom is not.</p>\n","default":false},"throttle":{"type":["number"],"description":"<p>Specify the frame rate of views refreshing, with unit millisecond (ms).</p>\n<p>If <a href=\"#animation\">animation</a> set as <code>true</code> and <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as bigger than <code>0</code>, you can keep <code>throttle</code> as the default value <code>100</code> (or set it as a value bigger than <code>0</code>), otherwise it might be not smooth when dragging.</p>\n<p>If <a href=\"#animation\">animation</a> set as <code>false</code> or <a href=\"#animationDurationUpdate\">animationDurationUpdate</a> set as <code>0</code>, and data size is not very large, and it seems to be not smooth when dragging, you can set <code>throttle</code> as <code>0</code> to improve that.</p>\n","default":100},"rangeMode":{"type":["Array"],"description":"<p>For example <code>rangeMode: ['value', 'percent']</code> means that use absolute value in <code>start</code> and percent value in <code>end</code>.</p>\n<p>Optional value: <code>'value'</code>, <code>'percent'</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between dataZoom-slider component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between dataZoom-slider component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between dataZoom-slider component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between dataZoom-slider component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"}}}]},"description":"<p><code>dataZoom</code> component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points.</p>\n<p>These types of <code>dataZoom</code> component are supported:</p>\n<ul>\n<li><p><a href=\"#dataZoom-inside\">dataZoomInside</a>: Data zoom functionalities is embeded inside coordinate systems, enable user to zoom or roam coordinate system by mouse dragging, mouse move or finger touch (in touch screen).</p>\n</li>\n<li><p><a href=\"#dataZoom-slider\">dataZoomSlider</a>: A special slider bar is provided, on which coordinate systems can be zoomed or roamed by mouse dragging or finger touch (in touch screen).</p>\n</li>\n<li><p><a href=\"#toolbox.feature.dataZoom\">dataZoomSelect</a>: A marquee tool is provided for zooming or roaming coordinate system. That is <a href=\"#toolbox.feature.dataZoom\">toolbox.feature.dataZoom</a>, which can only be configured in toolbox.</p>\n</li>\n</ul>\n<p>Example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<hr>\n<p><strong>✦ Relationship between dataZoom and axis ✦</strong></p>\n<p>Basically <code>dataZoom</code> component operates "window" on axis to zoom or roam coordinate system.</p>\n<blockquote>\n<p>Use <a href=\"#dataZoom.xAxisIndex\">dataZoom.xAxisIndex</a> or <a href=\"#dataZoom.yAxisIndex\">dataZoom.yAxisIndex</a> or <a href=\"#dataZoom.radiusAxisIndex\">dataZoom.radiusAxisIndex</a> or <a href=\"#dataZoom.angleAxisIndex\">dataZoom.angleAxisIndex</a> to specify which axes are operated by <code>dataZoom</code>.</p>\n</blockquote>\n<p>A single chart instance can contains several <code>dataZoom</code> components, each of which controls different axes. The <code>dataZoom</code> components that control the same axis will be automatically linked (i.e., all of them will be updated when one of them is updated by user action or API call).</p>\n<p><br></p>\n<hr>\n<p><strong>✦ How dataZoom componets operates axes and data ✦</strong></p>\n<p>Generally <code>dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>'filter': data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>'weakFilter': data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>'empty': data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>'none': Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code>filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code>xAxis</code> or only <code>yAxis</code> is controlled by <code>dataZoom</code>, <code>filterMode: 'filter'</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code>xAxis</code> and <code>yAxis</code> are operated by <code>dataZoom</code>:</p>\n<ul>\n<li><p>If <code>xAxis</code> and <code>yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code>'value'</code>), they should be set to be <code>filterMode: 'empty'</code>.</p>\n</li>\n<li><p>If <code>xAxis</code> is the main axis and <code>yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code>dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code>dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code>xAxis</code> should be set to be <code>fiterMode: 'filter'</code>, while <code>yAxis</code> shoule be set to be <code>fiterMode: 'empty'</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demostrated by the sample:</p>\n<pre><code class=\"lang-javascript\">option = {\n dataZoom: [\n {\n id: 'dataZoomX',\n type: 'slider',\n xAxisIndex: [0],\n filterMode: 'filter'\n },\n {\n id: 'dataZoomY',\n type: 'slider',\n yAxisIndex: [0],\n filterMode: 'empty'\n }\n ],\n xAxis: {type: 'value'},\n yAxis: {type: 'value'},\n series{\n type: 'bar',\n data: [\n // The first column corresponds to xAxis,\n // and the second coloum corresponds to yAxis.\n [12, 24, 36],\n [90, 80, 70],\n [3, 9, 27],\n [1, 11, 111]\n ]\n }\n}\n</code></pre>\n<p>In the sample above, <code>dataZoomX</code> is set as <code>filterMode: 'filter'</code>. When use drags <code>dataZoomX</code> (do not touch <code>dataZoomY</code>) and the valueWindow of <code>xAxis</code> is changed to <code>[2, 50]</code> consequently, <code>dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n [12, 24, 36],\n // [90, 80, 70] This item is filtered, as 90 is out of the window.\n [3, 9, 27]\n // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code>24</code>, <code>80</code>, <code>9</code>, <code>11</code>. After filtering, only <code>24</code> and <code>9</code> are left. Then the extent of <code>yAxis</code> is adjusted to adapt the two values (if <code>yAxis.min</code> and <code>yAxis.man</code> are not set).</p>\n<p>So <code>filterMode: 'filter'</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let's review the sample from the beginning, <code>dataZoomY</code> is set as <code>filterMode: 'empty'</code>. So if user drags <code>dataZoomY</code> (do not touch <code>dataZoomX</code>) and its window is changed to <code>[10, 60]</code> consequently, <code>dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but sill hold the place). The series.data turns out to be:</p>\n<pre><code class=\"lang-javascript\">[\n [12, 24, 36],\n [90, NaN, 70], // Set to NaN\n [3, NaN, 27], // Set to NaN\n [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first colum (i.e., <code>12</code>, <code>90</code>, <code>3</code>, <code>1</code>, which corresponds to <code>xAxis</code>), will not be changed at all. So dragging <code>yAxis</code> will not change extent of <code>xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n\n<p>Moreover, when <code>min</code>, <code>max</code> of an axis is set (e.g., <code>yAxis: {min: 0, max: 400}</code>), this extent of the axis will not be modified by the behaviour of dataZoom of other axis any more.</p>\n<p><br></p>\n<hr>\n<p><strong>✦ How to set window ✦</strong></p>\n<p>You can set the current window in two forms:</p>\n<ul>\n<li><p>percent value: see <a href=\"#dataZoom.start\">dataZoom.start</a> and <a href=\"#dataZoom.end\">dataZoom.end</a>.</p>\n</li>\n<li><p>absolute value: see <a href=\"#dataZoom.startValue\">dataZoom.startValue</a> and <a href=\"#dataZoom.endValue\">dataZoom.endValue</a>.</p>\n</li>\n</ul>\n<p>Notice: If use percent value form, and it is in the senario below, the result of dataZoom depends on the sequence of dataZoom definitions appearing in <code>option</code>.</p>\n<pre><code class=\"lang-javascript\">option = {\n dataZoom: [\n {\n id: 'dataZoomX',\n type: 'slider',\n xAxisIndex: [0],\n filterMode: 'filter', // Set as 'filter' so that the modification\n // of window of xAxis willl effect the\n // window of yAxis.\n start: 30,\n end: 70\n },\n {\n id: 'dataZoomY',\n type: 'slider',\n yAxisIndex: [0],\n filterMode: 'empty',\n start: 20,\n end: 80\n }\n ],\n xAxis: {\n type: 'value'\n },\n yAxis: {\n type: 'value'\n // Notice there is no min or max set to\n // restrict the view extent of yAxis.\n },\n series{\n type: 'bar',\n data: [\n // The first column corresponds to xAxis,\n // and the second column corresponds to yAxis.\n [12, 24, 36],\n [90, 80, 70],\n [3, 9, 27],\n [1, 11, 111]\n ]\n }\n}\n</code></pre>\n<p>What is the exact meaning of <code>start: 20, end: 80</code> in <code>dataZoomY</code> in the example above?</p>\n<ul>\n<li><p>If <code>yAxis.min</code> and <code>yAxis.max</code> are set:</p>\n<p> <code>start: 20, end: 80</code> of <code>dataZoomY</code> means: from <code>20%</code> to <code>80%</code> out of <code>[yAxis.min, yAxis.max]</code>.</p>\n<p> If one of <code>yAxis.min</code> and <code>yAxis.max</code> is not set, the corresponding edge of the full extend also follow rule as follows.</p>\n</li>\n<li><p>If <code>yAxis.min</code> and <code>yAxis.max</code> are not set:</p>\n<ul>\n<li><p>If <code>dataZoomX</code> is set to be <code>filterMode: 'empty'</code>:</p>\n<p> <code>start: 20, end: 80</code> of <code>dataZoomY</code> means: from <code>20%</code> to <code>80%</code> out of <code>[dataMinY to dataMaxY]</code> of series.data (i.e., <code>[9, 80]</code> in the example above).</p>\n</li>\n<li><p>If <code>dataZoomX</code> is set to <code>filterMode: 'filter'</code>:</p>\n<p> Since <code>dataZoomX</code> is defined before <code>dataZoomY</code>, <code>start: 30, end: 70</code> of <code>dataZoomX</code> means: from <code>30%</code> to <code>70%</code> out of full series.data, whereas <code>start: 20, end: 80</code> of <code>dataZoomY</code> means: from <code>20%</code> to <code>80%</code> out of the series.data having been filtered by <code>dataZoomX</code>.</p>\n<p> If you want to change the process sequence, you can just change the sequence of the definitions apearing in <code>option</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<br></p>\n<p>Detailed configurations are listed as follows.</p>\n","properties":{}},"visualMap":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><strong>Continuous visualMap component (visualMapContinuous)</strong></p>\n<p> (See <a href=\"#visualMap\">the introduction to visual Map component (visualMap)</a>)</p>\n<p>You can set <a href=\"#visualMap.calculable\">visualMap.calculable</a> to show or hide the hanldes, which is used to change the selected range in <code>visualMapContinuous</code>.</p>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"<p>Used to determine that it is a continuous visualMap component.</p>\n","default":"continuous"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"min":{"type":["number"],"description":"<p>Specify the min dataValue for the visualMap component. <code>[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>Notice that <code>min</code> and <code>max</code> should be specified explicitly, and be <code>[0, 200]</code> by default, but not <code>dataMin</code> and <code>dataMax</code> in series.data.</p>\n"},"max":{"type":["number"],"description":"<p>Specify the max dataValue for the visualMap component. <code>[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>Notice that <code>min</code> and <code>max</code> should be specified explicitly, and be <code>[0, 200]</code> by default, but not <code>dataMin</code> and <code>dataMax</code> in series.data.</p>\n"},"range":{"type":["Array"],"description":"<p>Specify selected range, that is, the dataValue corresponding to the two handles. For example:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n visualMap: {\n min: 0,\n max: 100,\n // dataValue corresponding to the two handles.\n range: [4, 15],\n ...\n }\n});\n</code></pre>\n<p><strong>auto-adaption when min or max is modified by setOption</strong></p>\n<ul>\n<li>If <code>range</code> is not set (or set to null or undefined)</li>\n</ul>\n<pre><code class=\"lang-javascript\">For instance:\nchart.setOption({visualMap: {min: 10, max: 300}}); // range is not set, then range is [min, max] by default, that is, [10, 300]。\n\nchart.setOption({visualMap: {min: 0, max: 400}}); // Modify min and max using setOption again.\n// Then range will be auto-modified to the new [min, max], that is, [0, 400].\n</code></pre>\n<ul>\n<li>If <code>range</code> is set explicitly, such as [10, 300]</li>\n</ul>\n<pre><code class=\"lang-javascript\">For instance:\nchart.setOption({visualMap: {min: 10, max: 300, range: [20, 80]}}); // range is set to [20, 80].\n\nchart.setOption({visualMap: {min: 0, max: 400}}); // min and max are modifies using setOption.\n// Then range keep the original value ([20, 80]) but will not do auto-adaption。\n\nchart.setOption({visualMap: {range: null}}); // Set range to null then.\n// Then auto-adaption of range turns on and range is auto modified to [min, max], that is, [0, 400].\n</code></pre>\n<p><code>range</code> gotten by <code>getOption</code> is always an <code>Array</code>, but not <code>null</code> or <code>undefined</code>.</p>\n"},"calculable":{"type":["boolean"],"description":"<p>Whether show handles, which can be dragged to adjust "selected range".</p>\n<p>Notes: In order to be compatible with ECharts2, the rule, which seems to be a little odd, is retained: when <a href=\"#visualMap.type\">visualMap.type</a> is not set, and <a href=\"#visualMap-continuous.calculable\">visualMap.calculable</a> was set to be <code>true</code>, <a href=\"#visualMap.type\">visualMap.type</a> will be automatically set as <code>'continuous'</code>, regardless of some settings such as <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a>. Therefore, it is recommended to set <a href=\"#visualMap.type\">visualMap.type</a> explicitly, which avoids ambiguity.</p>\n","default":false},"realtime":{"type":["boolean"],"description":"<p>Whether to update view in real time when dragging a handle.</p>\n<ul>\n<li><p>If <code>ture</code>, the chart view will be updated in real time when dragging.</p>\n</li>\n<li><p>If <code>false</code>, the chart view will be updated at the end of the handle dragging.</p>\n</li>\n</ul>\n","default":true},"inverse":{"type":["boolean"],"description":"<p>Whether to inverse the layout of visualMap component.</p>\n<p>As <code>inverse</code> is <code>false</code>, the layout direction is the same as <a href=\"#grid\">catesian coordinate</a>. That is:</p>\n<ul>\n<li>As <a href=\"#visualMap.orient\">visualMap.orient</a> is <code>'vertical'</code>, large data are placed at the top while small at the bottom.</li>\n<li>As <a href=\"#visualMap.orient\">visualMap.orient</a> is <code>'horizontal'</code>, large data are placed on the right while small on the left.</li>\n</ul>\n<p>As <code>inverse</code> is <code>true</code>, the result is opposite.</p>\n","default":false},"precision":{"type":["number"],"description":"<p>The decimal precision of label, defaults to be 0 (no decimals).</p>\n","default":0},"itemWidth":{"type":["number"],"description":"<p>The width of the main bar of visualMap component.</p>\n","default":20},"itemHeight":{"type":["number"],"description":"<p>The height of the main bar of visualMap component.</p>\n","default":140},"align":{"type":["string"],"description":"<p>Specify the position of handles and labels, against the main bar. The possible values are:</p>\n<ul>\n<li><code>'auto'</code> Decide automatically.</li>\n<li><code>'left'</code> The handles and labels are on the right, which is valid when <code>orient</code> is set as <code>'horizontal'</code>.</li>\n<li><code>'right'</code> The handles and labels are on the left, which is valid when <code>orient</code> is set as <code>'horizontal'</code>.</li>\n<li><code>'top'</code> the handles and labels are at the bottom, which is valid when <code>orient</code> is set as <code>'vertical'</code>.</li>\n<li><code>'bottom'</code> the handles and labels are at the top, which is valid when <code>orient</code> is set as <code>'vertical'</code>.</li>\n</ul>\n","default":"'auto'"},"text":{"type":["Array"],"description":"<p>The label text on both ends, such as <code>['High', 'Low']</code>. <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/map-visualMap-continuous-text&edit=1&reset=1\" target=\"_blank\">sample</a>.</p>\n<p>You can understand the order of items in <code>text</code> array just by a simple trial. See <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n","default":null},"textGap":{"type":["Array"],"description":"<p>The distance between the ends of the main bar and the label, with unit px. See <a href=\"#visualMap-continuous.text\">visualMap-continuous.text</a></p>\n","default":10},"show":{"type":["boolean"],"description":"<p>Whether to show visualMap-continuous component. If set as <code>false</code>, visualMap-continuous component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.</p>\n","default":true},"dimension":{"type":["string"],"description":"<p>Specify which dimension should be used to fetch dataValue from <a href=\"#series.data\">series.data</a>, and then map them to visual channel.</p>\n<p><a href=\"#series.data\">series.data</a> can be regarded as a two-dimensional array, for instance:</p>\n<pre><code class=\"lang-javascript\">[\n [12, 23, 43],\n [12, 23, 43],\n [43, 545, 65],\n [92, 23, 33]\n]\n</code></pre>\n<p>Each column of the above array is regarded as a <code>dimension</code>. For example, when property <code>dimension</code> is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.</p>\n<p>Use the last dimension of <code>data</code> by default.</p>\n"},"seriesIndex":{"type":["number","Array"],"description":"<p>Specify visual mapping should be performed on which series, from which\n<a href=\"#series.data\">series.data</a> is fetched.</p>\n<p>All series are used by defualt.</p>\n"},"hoverLink":{"type":["boolean"],"description":"<p><code>hoverLink</code> enable highlight certain graphical elements of chart when mouse hovers on some place of <code>visualMap</code> component that is coresponding to those graphical elements by visual mapping.</p>\n<p>Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in <code>visualMap</code>.</p>\n","default":true},"inRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code>symbol</code>: Type of symbol.</li>\n<li><code>symbolSize</code>: Symbol size.</li>\n<li><code>color</code>: Symbol color.</li>\n<li><code>colorAlpha</code>: Symbol alpha channel.</li>\n<li><code>opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code>colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<hr>\n<p><code>inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code>visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code>visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code>color</code> (or <code>symbol</code>, <code>size</code>, ...) can be both customized in the scatter chart and <code>visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels both in target series and visualMap-continuous component itself:\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [30, 100]\n }\n }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels only for target series.\n target: {\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n }\n },\n // Define visual channels only for visualMap-continuous component.\n controller: {\n inRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels for both target series and visualMap-continuous component.\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n },\n // Define visual channels only for visualMap-continuous component, which\n // will overlap the properties with the same name in the above common\n // definition. (symbolSize is overlapped by [30, 100] while color\n // keeps the original value)\n controller: {\n inRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code>color</code>、<code>symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code>opacity</code> is recommended, rather than <code>colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code>Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code>[visaulMap.min, visualMap.max]</code> to a given range of <code>[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code>[visualMap.min, visualMap.max]</code> is set to be <code>[0, 100]</code>, and there is series.data: <code>[50, 10, 100]</code>. We intend to map them to an <code>opacity</code> range <code>[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code>[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code>opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code>[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not <code>dataMin</code> and <code>dataMax</code> in series.data。</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code>Array</code> is used to express the range of visual value, e.g., <code>color: ['#333', '#777']</code>.</p>\n</li>\n<li><p>Single <code>number</code> or single <code>string</code> can also be used, which will be converted to an <code>Array</code> by visualMap component. e.g.: <code>opacity: 0.4</code> will be converted to <code>opacity: [0.4, 0.4]</code>, <code>color: '#333'</code> will be converted to <code>color: ['#333', '#333']</code>.</p>\n</li>\n<li><p>For visual channel <code>symbolSize</code>, <code>opacity</code>, <code>colorAlpha</code>, <code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code>, the range of visual value is always in the form of: <code>[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code>colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code>visualMap.min</code> (if any) will be mapped to lightness <code>0.8</code>, and the dataValue that equals to <code>visualMap.max</code> (if any) will be mapped to lightness <code>0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code>[visualMap.min, visualMap.max]</code> and the range of <code>[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code>color</code>, array is used, like: <code>['#333', '#78ab23', 'blue']</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'#333'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'blue'</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code>symbol</code>, array is used, like: <code>['circle', 'rect', 'diamond']</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'circle'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'diamond'</code>, and other dataValues will be caculated based on the numerical distance to <code>visualMax.min</code> and to <code>visualMap.max</code>, and mapped onto one of <code>'circle'</code>, <code>'rect'</code>, <code>'diamond'</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code>opacity</code>、<code>colorAlpha</code>、<code>colorLightness</code>、<code>colorSaturation</code>，<code>visual value</code></p>\n<p> possible value range is <code>[0, 1]</code>。</p>\n</li>\n<li><p><code>colorHue</code></p>\n<p> possible value range is <code>[0, 360]</code>。</p>\n</li>\n<li><p><code>color</code>：</p>\n<p> color can use RGB expression, like <code>'rgb(128, 128, 128)'</code>, or RGBA expression, like <code>'rgba(128, 128, 128, 0.5)'</code>, or Hex expression, like '#ccc'.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code>Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code>['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']</code>. And there is series.data: <code>['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']</code>. Then we can establish the lookup rule for color: <code>color: {'Warden': 'red', 'Demon Hunter': 'black'}</code>, by which the <code>visualMap</code> component will map <code>dataValue</code> to <code>color</code>.</p>\n<p>How to configure <code>visualMap</code> component to do <code>Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code>Object</code> or <code>Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n type: 'piecewise',\n // categories defines the items that to be displayed in visualMap-piecewise component.\n categories: [\n 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n ],\n inRange: {\n // visual value can be an Object：\n color: {\n 'Warden': 'red',\n 'Demon Hunter': 'black',\n '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',\n // all other dataValues should be mapped to 'green'.\n }\n // visual value can also be a single value,\n // means that all dataValues should be mapped to the value.\n color: 'green',\n // visual value can also be a array, with the same length\n // as the array of categories and one-one mapping onto it.\n color: ['red', 'black', 'green', 'yellow', 'white']\n }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code>setOption</code> to set the initial <code>option</code>), <code>setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n visualMap: {\n inRange: {color: ['red', 'blue']}\n }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code>inRange</code>, <code>outOfRange</code>, <code>target</code>, <code>controller</code>) do not support "merge", that is, anyone among them is modified when use <code>setOption</code> again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to <code>setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code>getOption() -> modify the gotten option -> setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = ['red', 'blue'];\noption.visualMap.controller.inRange.color = ['red', 'blue'];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code>['#f6efa6', '#d88273', '#bf444c']</code> in <code>inRange</code> if you not set <code>inRange</code>. If you dont want it, set <code>inRange: {color: null}</code> to disable it.</p>\n"},"outOfRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code>symbol</code>: Type of symbol.</li>\n<li><code>symbolSize</code>: Symbol size.</li>\n<li><code>color</code>: Symbol color.</li>\n<li><code>colorAlpha</code>: Symbol alpha channel.</li>\n<li><code>opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code>colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code>outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code>visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code>visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code>color</code> (or <code>symbol</code>, <code>size</code>, ...) can be both customized in the scatter chart and <code>visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels both in target series and visualMap-continuous component itself:\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [30, 100]\n }\n }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels only for target series.\n target: {\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n }\n },\n // Define visual channels only for visualMap-continuous component.\n controller: {\n outOfRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels for both target series and visualMap-continuous component.\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n },\n // Define visual channels only for visualMap-continuous component, which\n // will overlap the properties with the same name in the above common\n // definition. (symbolSize is overlapped by [30, 100] while color\n // keeps the original value)\n controller: {\n outOfRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code>color</code>、<code>symbolSize</code> and ect.) can be defined in outOfRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code>opacity</code> is recommended, rather than <code>colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code>Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code>[visaulMap.min, visualMap.max]</code> to a given range of <code>[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code>[visualMap.min, visualMap.max]</code> is set to be <code>[0, 100]</code>, and there is series.data: <code>[50, 10, 100]</code>. We intend to map them to an <code>opacity</code> range <code>[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code>[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code>opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code>[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not <code>dataMin</code> and <code>dataMax</code> in series.data。</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code>Array</code> is used to express the range of visual value, e.g., <code>color: ['#333', '#777']</code>.</p>\n</li>\n<li><p>Single <code>number</code> or single <code>string</code> can also be used, which will be converted to an <code>Array</code> by visualMap component. e.g.: <code>opacity: 0.4</code> will be converted to <code>opacity: [0.4, 0.4]</code>, <code>color: '#333'</code> will be converted to <code>color: ['#333', '#333']</code>.</p>\n</li>\n<li><p>For visual channel <code>symbolSize</code>, <code>opacity</code>, <code>colorAlpha</code>, <code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code>, the range of visual value is always in the form of: <code>[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code>colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code>visualMap.min</code> (if any) will be mapped to lightness <code>0.8</code>, and the dataValue that equals to <code>visualMap.max</code> (if any) will be mapped to lightness <code>0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code>[visualMap.min, visualMap.max]</code> and the range of <code>[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code>color</code>, array is used, like: <code>['#333', '#78ab23', 'blue']</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'#333'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'blue'</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code>symbol</code>, array is used, like: <code>['circle', 'rect', 'diamond']</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'circle'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'diamond'</code>, and other dataValues will be caculated based on the numerical distance to <code>visualMax.min</code> and to <code>visualMap.max</code>, and mapped onto one of <code>'circle'</code>, <code>'rect'</code>, <code>'diamond'</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code>opacity</code>、<code>colorAlpha</code>、<code>colorLightness</code>、<code>colorSaturation</code>，<code>visual value</code></p>\n<p> possible value range is <code>[0, 1]</code>。</p>\n</li>\n<li><p><code>colorHue</code></p>\n<p> possible value range is <code>[0, 360]</code>。</p>\n</li>\n<li><p><code>color</code>：</p>\n<p> color can use RGB expression, like <code>'rgb(128, 128, 128)'</code>, or RGBA expression, like <code>'rgba(128, 128, 128, 0.5)'</code>, or Hex expression, like '#ccc'.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code>Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code>['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']</code>. And there is series.data: <code>['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']</code>. Then we can establish the lookup rule for color: <code>color: {'Warden': 'red', 'Demon Hunter': 'black'}</code>, by which the <code>visualMap</code> component will map <code>dataValue</code> to <code>color</code>.</p>\n<p>How to configure <code>visualMap</code> component to do <code>Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code>Object</code> or <code>Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n type: 'piecewise',\n // categories defines the items that to be displayed in visualMap-piecewise component.\n categories: [\n 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n ],\n outOfRange: {\n // visual value can be an Object：\n color: {\n 'Warden': 'red',\n 'Demon Hunter': 'black',\n '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',\n // all other dataValues should be mapped to 'green'.\n }\n // visual value can also be a single value,\n // means that all dataValues should be mapped to the value.\n color: 'green',\n // visual value can also be a array, with the same length\n // as the array of categories and one-one mapping onto it.\n color: ['red', 'black', 'green', 'yellow', 'white']\n }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code>setOption</code> to set the initial <code>option</code>), <code>setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n visualMap: {\n inRange: {color: ['red', 'blue']}\n }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code>inRange</code>, <code>outOfRange</code>, <code>target</code>, <code>controller</code>) do not support "merge", that is, anyone among them is modified when use <code>setOption</code> again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to <code>setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code>getOption() -> modify the gotten option -> setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = ['red', 'blue'];\noption.visualMap.controller.inRange.color = ['red', 'blue'];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n"},"controller":{"type":["Object"],"description":"<p>Property <code>inRange</code> and <code>outOfRange</code> can be set within property <code>controller</code>, which means those <code>inRange</code> and <code>outOfRange</code> are only used on the controller (<code>visualMap</code> component itself), but are not used on chart (series). This property is useful in some scenario that the view of controller need to be customized in detail.</p>\n","properties":{"inRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code>symbol</code>: Type of symbol.</li>\n<li><code>symbolSize</code>: Symbol size.</li>\n<li><code>color</code>: Symbol color.</li>\n<li><code>colorAlpha</code>: Symbol alpha channel.</li>\n<li><code>opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code>colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<hr>\n<p><code>inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code>visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code>visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code>color</code> (or <code>symbol</code>, <code>size</code>, ...) can be both customized in the scatter chart and <code>visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels both in target series and visualMap-continuous component itself:\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [30, 100]\n }\n }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels only for target series.\n target: {\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n }\n },\n // Define visual channels only for visualMap-continuous component.\n controller: {\n inRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels for both target series and visualMap-continuous component.\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n },\n // Define visual channels only for visualMap-continuous component, which\n // will overlap the properties with the same name in the above common\n // definition. (symbolSize is overlapped by [30, 100] while color\n // keeps the original value)\n controller: {\n inRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code>color</code>、<code>symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code>opacity</code> is recommended, rather than <code>colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code>Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code>[visaulMap.min, visualMap.max]</code> to a given range of <code>[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code>[visualMap.min, visualMap.max]</code> is set to be <code>[0, 100]</code>, and there is series.data: <code>[50, 10, 100]</code>. We intend to map them to an <code>opacity</code> range <code>[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code>[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code>opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code>[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not <code>dataMin</code> and <code>dataMax</code> in series.data。</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code>Array</code> is used to express the range of visual value, e.g., <code>color: ['#333', '#777']</code>.</p>\n</li>\n<li><p>Single <code>number</code> or single <code>string</code> can also be used, which will be converted to an <code>Array</code> by visualMap component. e.g.: <code>opacity: 0.4</code> will be converted to <code>opacity: [0.4, 0.4]</code>, <code>color: '#333'</code> will be converted to <code>color: ['#333', '#333']</code>.</p>\n</li>\n<li><p>For visual channel <code>symbolSize</code>, <code>opacity</code>, <code>colorAlpha</code>, <code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code>, the range of visual value is always in the form of: <code>[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code>colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code>visualMap.min</code> (if any) will be mapped to lightness <code>0.8</code>, and the dataValue that equals to <code>visualMap.max</code> (if any) will be mapped to lightness <code>0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code>[visualMap.min, visualMap.max]</code> and the range of <code>[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code>color</code>, array is used, like: <code>['#333', '#78ab23', 'blue']</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'#333'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'blue'</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code>symbol</code>, array is used, like: <code>['circle', 'rect', 'diamond']</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'circle'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'diamond'</code>, and other dataValues will be caculated based on the numerical distance to <code>visualMax.min</code> and to <code>visualMap.max</code>, and mapped onto one of <code>'circle'</code>, <code>'rect'</code>, <code>'diamond'</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code>opacity</code>、<code>colorAlpha</code>、<code>colorLightness</code>、<code>colorSaturation</code>，<code>visual value</code></p>\n<p> possible value range is <code>[0, 1]</code>。</p>\n</li>\n<li><p><code>colorHue</code></p>\n<p> possible value range is <code>[0, 360]</code>。</p>\n</li>\n<li><p><code>color</code>：</p>\n<p> color can use RGB expression, like <code>'rgb(128, 128, 128)'</code>, or RGBA expression, like <code>'rgba(128, 128, 128, 0.5)'</code>, or Hex expression, like '#ccc'.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code>Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code>['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']</code>. And there is series.data: <code>['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']</code>. Then we can establish the lookup rule for color: <code>color: {'Warden': 'red', 'Demon Hunter': 'black'}</code>, by which the <code>visualMap</code> component will map <code>dataValue</code> to <code>color</code>.</p>\n<p>How to configure <code>visualMap</code> component to do <code>Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code>Object</code> or <code>Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n type: 'piecewise',\n // categories defines the items that to be displayed in visualMap-piecewise component.\n categories: [\n 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n ],\n inRange: {\n // visual value can be an Object：\n color: {\n 'Warden': 'red',\n 'Demon Hunter': 'black',\n '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',\n // all other dataValues should be mapped to 'green'.\n }\n // visual value can also be a single value,\n // means that all dataValues should be mapped to the value.\n color: 'green',\n // visual value can also be a array, with the same length\n // as the array of categories and one-one mapping onto it.\n color: ['red', 'black', 'green', 'yellow', 'white']\n }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code>setOption</code> to set the initial <code>option</code>), <code>setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n visualMap: {\n inRange: {color: ['red', 'blue']}\n }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code>inRange</code>, <code>outOfRange</code>, <code>target</code>, <code>controller</code>) do not support "merge", that is, anyone among them is modified when use <code>setOption</code> again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to <code>setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code>getOption() -> modify the gotten option -> setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = ['red', 'blue'];\noption.visualMap.controller.inRange.color = ['red', 'blue'];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code>['#f6efa6', '#d88273', '#bf444c']</code> in <code>inRange</code> if you not set <code>inRange</code>. If you dont want it, set <code>inRange: {color: null}</code> to disable it.</p>\n"},"outOfRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code>symbol</code>: Type of symbol.</li>\n<li><code>symbolSize</code>: Symbol size.</li>\n<li><code>color</code>: Symbol color.</li>\n<li><code>colorAlpha</code>: Symbol alpha channel.</li>\n<li><code>opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code>colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code>outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-continuous.seriesIndex\">visualMap-continuous.seriesIndex</a>) and in <code>visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code>visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code>color</code> (or <code>symbol</code>, <code>size</code>, ...) can be both customized in the scatter chart and <code>visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels both in target series and visualMap-continuous component itself:\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [30, 100]\n }\n }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels only for target series.\n target: {\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n }\n },\n // Define visual channels only for visualMap-continuous component.\n controller: {\n outOfRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels for both target series and visualMap-continuous component.\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n },\n // Define visual channels only for visualMap-continuous component, which\n // will overlap the properties with the same name in the above common\n // definition. (symbolSize is overlapped by [30, 100] while color\n // keeps the original value)\n controller: {\n outOfRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code>color</code>、<code>symbolSize</code> and ect.) can be defined in outOfRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code>opacity</code> is recommended, rather than <code>colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code>Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code>[visaulMap.min, visualMap.max]</code> to a given range of <code>[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code>[visualMap.min, visualMap.max]</code> is set to be <code>[0, 100]</code>, and there is series.data: <code>[50, 10, 100]</code>. We intend to map them to an <code>opacity</code> range <code>[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code>[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code>opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code>[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not <code>dataMin</code> and <code>dataMax</code> in series.data。</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code>Array</code> is used to express the range of visual value, e.g., <code>color: ['#333', '#777']</code>.</p>\n</li>\n<li><p>Single <code>number</code> or single <code>string</code> can also be used, which will be converted to an <code>Array</code> by visualMap component. e.g.: <code>opacity: 0.4</code> will be converted to <code>opacity: [0.4, 0.4]</code>, <code>color: '#333'</code> will be converted to <code>color: ['#333', '#333']</code>.</p>\n</li>\n<li><p>For visual channel <code>symbolSize</code>, <code>opacity</code>, <code>colorAlpha</code>, <code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code>, the range of visual value is always in the form of: <code>[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code>colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code>visualMap.min</code> (if any) will be mapped to lightness <code>0.8</code>, and the dataValue that equals to <code>visualMap.max</code> (if any) will be mapped to lightness <code>0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code>[visualMap.min, visualMap.max]</code> and the range of <code>[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code>color</code>, array is used, like: <code>['#333', '#78ab23', 'blue']</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'#333'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'blue'</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code>symbol</code>, array is used, like: <code>['circle', 'rect', 'diamond']</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'circle'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'diamond'</code>, and other dataValues will be caculated based on the numerical distance to <code>visualMax.min</code> and to <code>visualMap.max</code>, and mapped onto one of <code>'circle'</code>, <code>'rect'</code>, <code>'diamond'</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code>opacity</code>、<code>colorAlpha</code>、<code>colorLightness</code>、<code>colorSaturation</code>，<code>visual value</code></p>\n<p> possible value range is <code>[0, 1]</code>。</p>\n</li>\n<li><p><code>colorHue</code></p>\n<p> possible value range is <code>[0, 360]</code>。</p>\n</li>\n<li><p><code>color</code>：</p>\n<p> color can use RGB expression, like <code>'rgb(128, 128, 128)'</code>, or RGBA expression, like <code>'rgba(128, 128, 128, 0.5)'</code>, or Hex expression, like '#ccc'.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code>Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code>['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']</code>. And there is series.data: <code>['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']</code>. Then we can establish the lookup rule for color: <code>color: {'Warden': 'red', 'Demon Hunter': 'black'}</code>, by which the <code>visualMap</code> component will map <code>dataValue</code> to <code>color</code>.</p>\n<p>How to configure <code>visualMap</code> component to do <code>Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code>Object</code> or <code>Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n type: 'piecewise',\n // categories defines the items that to be displayed in visualMap-piecewise component.\n categories: [\n 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n ],\n outOfRange: {\n // visual value can be an Object：\n color: {\n 'Warden': 'red',\n 'Demon Hunter': 'black',\n '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',\n // all other dataValues should be mapped to 'green'.\n }\n // visual value can also be a single value,\n // means that all dataValues should be mapped to the value.\n color: 'green',\n // visual value can also be a array, with the same length\n // as the array of categories and one-one mapping onto it.\n color: ['red', 'black', 'green', 'yellow', 'white']\n }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code>setOption</code> to set the initial <code>option</code>), <code>setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n visualMap: {\n inRange: {color: ['red', 'blue']}\n }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code>inRange</code>, <code>outOfRange</code>, <code>target</code>, <code>controller</code>) do not support "merge", that is, anyone among them is modified when use <code>setOption</code> again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to <code>setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code>getOption() -> modify the gotten option -> setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = ['red', 'blue'];\noption.visualMap.controller.inRange.color = ['red', 'blue'];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n"}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":4},"left":{"type":["string","number"],"description":"<p>Distance between visualMap component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":0},"top":{"type":["string","number"],"description":"<p>Distance between visualMap component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"right":{"type":["string","number"],"description":"<p>Distance between visualMap component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":"auto"},"bottom":{"type":["string","number"],"description":"<p>Distance between visualMap component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":0},"orient":{"type":["string"],"description":"<p>How to layout the visualMap component, <code>'horizontal'</code> or <code>'vertical'</code>.</p>\n","default":"'vertical'"},"padding":{"type":["number","Array"],"description":"<p>visualMap-continuous space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"backgroundColor":{"type":["Color"],"description":"<p>background color of visualMap component.</p>\n","default":"'rgba(0,0,0,0)'"},"borderColor":{"type":["Color"],"description":"<p>border color of visualMap component.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>border width of visualMap component, with unit: px.</p>\n","default":0},"color":{"type":["Array"],"description":"<p>This property is remained only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in <a href=\"#visualMap-continuous.inRange\">visualMap-continuous.inRange</a>, or <a href=\"#visualMap-continuous.outOfRange\">visualMap-continuous.outOfRange</a> if needed.</p>\n<p>If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property <code>color</code> is from <code>large</code> to <code>small</code>, whereas that in <a href=\"#visualMap-continuous.inRange\">visualMap-continuous.inRange</a> or <a href=\"#visualMap-continuous.outOfRange\">visualMap-continuous.outOfRange</a> is from <code>small</code> to <code>large</code>.</p>\n","default":"['#bf444c', '#d88273', '#f6efa6']"},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>visualMap text color.</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p>visualMap font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>visualMap font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>visualMap font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>visualMap font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"formatter":{"type":["string","Function"],"description":"<p>the formatter tool for label.</p>\n<ul>\n<li><p>If it was set as a <code>string</code>, it refers to a template, for instance: <code>aaaa{value}bbbb</code>, where <code>{value}</code> represents the value of the edge of the seleted range.</p>\n</li>\n<li><p>If it was set as a <code>Function</code>, it refers to a callback function, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">formatter: function (value) {\n return 'aaaa' + value + 'bbbb';\n}\n</code></pre>\n"}}},{"type":["Object"],"description":"<p><strong>Piecewise visualMap component (visualMapPiecewise) </strong></p>\n<p> (Reference to <a href=\"#visualMap\">the introduction of visual Map component (visualMap)</a>)</p>\n<p>Sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n<p>Piecewise visualMap component works in one of the three modes:</p>\n<ul>\n<li><strong>CONTINUOUS-AVERAGE</strong>: The series.data is continuous and is divided into pieces averagely according to <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a>.</li>\n<li><strong>CONTINUOUS-CUSTOMIZED</strong>: The series.data is continuous and is divided into pieces according to the given rule defined in <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a>.</li>\n<li><strong>CATEGORY</strong>: The series.data is discrete and is categorized according to <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"<p>Used to determine it is a piecewise visualMap component.</p>\n","default":"piecewise"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"splitNumber":{"type":["number"],"description":"<p>Continuous data can be divide into pieces averagely according to splitNumber, that is, if splitNumber is 5, data will be sliced into 5 pieces.</p>\n<p>The range of continuous data should be defined by <a href=\"#visualMap-piecewise.max\">max</a> and <a href=\"#visualMap-piecewise.min\">min</a>.</p>\n<p>If <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> or <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set up, the <code>splitNumber</code> will not be used any more.</p>\n","default":5},"pieces":{"type":["Array"],"description":"<p>Used to customize how to slice continuous data, and some specific view style for some pieces. For instance:</p>\n<pre><code class=\"lang-javascript\">pieces: [\n // Range of a piece can be specified by property min and max,\n // where min will be set as -Infinity if ignored,\n // and max will be set as Infinity if ignored.\n {min: 1500},\n {min: 900, max: 1500},\n {min: 310, max: 1000},\n {min: 200, max: 300},\n // Label of the piece can be specified.\n {min: 10, max: 200, label: '10 to 200 (custom label) '},\n // Color of the piece can be specified.\n {value: 123, label: '123 (custom special color) ', color: 'grey'},\n {max: 5}\n]\n</code></pre>\n<p>These visual channel can be customized in each piece:</p>\n<ul>\n<li><code>symbol</code>: Type of symbol.</li>\n<li><code>symbolSize</code>: Symbol size.</li>\n<li><code>color</code>: Symbol color.</li>\n<li><code>colorAlpha</code>: Symbol alpha channel.</li>\n<li><code>opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code>colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/map-visualMap-pieces&edit=1&reset=1\" target=\"_blank\">Sample</a></p>\n<p> (Notes: In ECharts2, <code>pieces</code> is called <code>splitList</code>, which is retained in ECharts3 for compatibility. But <code>pieces</code> is recommended.)</p>\n<p>You would realize the sequence in <code>pieces</code> by a simple trial. See more detailed rules in <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n"},"categories":{"type":["Array"],"description":"<p>When dataValues in series.data (specified by <a href=\"#visualMap-piecewise.dimension\">visualMap-piecewise.dimension</a>) are discrete (or also known as category data or enumerable data), and we intend to perform <strong>Table Mapping</strong> from dataVale to visual channels, <code>categories</code> is used to describe the entire enumeration of data. For instance:</p>\n<pre><code class=\"lang-javascript\">categories: [\n 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n],\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Sample</a></p>\n<p>You would realize the sequence in <code>categories</code> by a simple trial. See more detailed rules in <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n"},"min":{"type":["number"],"description":"<p>Specify the min dataValue for the visualMap component. <code>[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), <code>max</code> and <code>min</code> doesn't need to be specified.</p>\n<p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), they should be specified explicitly, and be <code>[0, 200]</code> by default, but not <code>dataMin</code> and <code>dataMax</code> in series.data.</p>\n"},"max":{"type":["number"],"description":"<p>Specify the max dataValue for the visualMap component. <code>[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), <code>max</code> and <code>min</code> doesn't need to be specified.</p>\n<p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), they should be specified explicitly, and be <code>[0, 200]</code> by default, but not <code>dataMin</code> and <code>dataMax</code> in series.data.</p>\n"},"minOpen":{"type":["boolean"],"description":"<p>This option works when <code>type</code> is <code>piecewise</code> and <code>min</code>/<code>max</code>/<code>splitNumber</code> are set.</p>\n<p>If it is set as <code>true</code>, an extra piece labeled with "< min" will show.</p>\n"},"maxOpen":{"type":["boolean"],"description":"<p>This option works when <code>type</code> is <code>piecewise</code> and <code>min</code>/<code>max</code>/<code>splitNumber</code> are set.</p>\n<p>If it is set as <code>true</code>, an extra piece labeled with "> max" will show.</p>\n"},"selectedMode":{"type":["string"],"description":"<p>Selected Mode could be:</p>\n<ul>\n<li><code>'multiple'</code> (multiple selection).</li>\n<li><code>'single'</code> (single selection).</li>\n</ul>\n","default":"'multiple'"},"inverse":{"type":["boolean"],"description":"<p>Whether to inverse the layout of visualMap component.</p>\n<ul>\n<li><p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), the rule of data layout is the same as <a href=\"#visualMap-continuous.inverse\">visualMap-continuous.inverse</a>.</p>\n</li>\n<li><p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), the layout of each piece is determined by the their order in the definition of <code>pieces</code> or <code>categories</code>, namely:</p>\n<ul>\n<li><p>When <code>inverse</code> is <code>false</code>:</p>\n<ul>\n<li><p>When <a href=\"#visualMap.orient\">visualMap.orient</a> is <code>'vertical'</code>, pieces[0] or categories[0] correspond to upward side.</p>\n</li>\n<li><p>When <a href=\"#visualMap.orient\">visualMap.orient</a> is <code>'horizontal'</code>, pieces[0] or categories[0] correspond to left side.</p>\n</li>\n</ul>\n</li>\n<li><p>When <code>inverse</code> is <code>true</code>, the results are opposite to above.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>If you just have a try, you'll know it is not so complicated.</p>\n","default":false},"precision":{"type":["number"],"description":"<p>The decimal precision of label, defaults to be 0 (no decimals).</p>\n<ul>\n<li><p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href=\"#visualMap-piecewise.splitNumber\">visualMap-piecewise.splitNumber</a> is used), the rule of data layout is the same as <a href=\"#visualMap-continuous.inverse\">visualMap-continuous.inverse</a>, decimal percision auto adapts to series.data.</p>\n</li>\n<li><p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href=\"#visualMap-piecewise.pieces\">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is used), decimal percision defaults to be 0 (no decimals):</p>\n</li>\n</ul>\n","default":null},"itemWidth":{"type":["number"],"description":"<p>The width of each graphical element that represents a piece.</p>\n","default":20},"itemHeight":{"type":["number"],"description":"<p>The height of each graphical element that represents a piece.</p>\n","default":14},"align":{"type":["string"],"description":"<p>The layout relationship between the graphical elements for pieces and their labels. Possible values are:</p>\n<ul>\n<li><code>'auto'</code> Decide automatically.</li>\n<li><code>'left'</code> The graphical elements for pieces are on the left and their labels are on the right.</li>\n<li><code>'right'</code> The graphical elements for pieces are on the right and their labels are on the left.</li>\n</ul>\n","default":"'auto'"},"text":{"type":["Array"],"description":"<p>The label text on both ends, such as <code>['High', 'Low']</code>. <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/map-visualMap-piecewise-text&edit=1&reset=1\" target=\"_blank\">Sample</a>.</p>\n<p>You can understand the order of items in <code>text</code> array just by a simple trial. See <a href=\"#visualMap.inverse\">visualMap.inverse</a>.</p>\n<p>The rule, that labels will not show when <code>text</code> is use, is retained for compatibility with ECharts2.</p>\n","default":null},"textGap":{"type":["Array"],"description":"<p>The distance between the ends of the graphical elements for pieces and the labels, with unit px. See <a href=\"#visualMap-piecewise.text\">visualMap-piecewise.text</a></p>\n","default":10},"showLabel":{"type":["boolean"],"description":"<p>Whether to show label of each item. By defualt, label will not be shown when <a href=\"#visualMap-piecewise.text\">visualMap-piecewise.text</a> used, otherwise label will be shown.</p>\n"},"itemGap = 10":{"type":["*"],"description":"<p>Its the distance between each two graphical elements for pieces. The unit is px.</p>\n"},"itemSymbol":{"type":["string"],"description":"<p>Default symbol (the shape of graphical element). Possible values are:</p>\n<p><code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>The setting of visual channel <code>symbol</code> can refer to <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a> and <a href=\"#visualMap-piecewise.outOfRange\">visualMap-piecewise.outOfRange</a>.</p>\n<p>When they are not specified, <code>itemSymbol</code> is adopted as the default value (but just used in visualMap component itself, not in chart).</p>\n","default":"'roundRect'"},"show":{"type":["boolean"],"description":"<p>Whether to show visualMap-piecewise component. If set as <code>false</code>, visualMap-piecewise component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.</p>\n","default":true},"dimension":{"type":["string"],"description":"<p>Specify which dimension should be used to fetch dataValue from <a href=\"#series.data\">series.data</a>, and then map them to visual channel.</p>\n<p><a href=\"#series.data\">series.data</a> can be regarded as a two-dimensional array, for instance:</p>\n<pre><code class=\"lang-javascript\">[\n [12, 23, 43],\n [12, 23, 43],\n [43, 545, 65],\n [92, 23, 33]\n]\n</code></pre>\n<p>Each column of the above array is regarded as a <code>dimension</code>. For example, when property <code>dimension</code> is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.</p>\n<p>Use the last dimension of <code>data</code> by default.</p>\n"},"seriesIndex":{"type":["number","Array"],"description":"<p>Specify visual mapping should be performed on which series, from which\n<a href=\"#series.data\">series.data</a> is fetched.</p>\n<p>All series are used by defualt.</p>\n"},"hoverLink":{"type":["boolean"],"description":"<p><code>hoverLink</code> enable highlight certain graphical elements of chart when mouse hovers on some place of <code>visualMap</code> component that is coresponding to those graphical elements by visual mapping.</p>\n<p>Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in <code>visualMap</code>.</p>\n","default":true},"inRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code>symbol</code>: Type of symbol.</li>\n<li><code>symbolSize</code>: Symbol size.</li>\n<li><code>color</code>: Symbol color.</li>\n<li><code>colorAlpha</code>: Symbol alpha channel.</li>\n<li><code>opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code>colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<hr>\n<p><code>inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code>visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code>visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code>color</code> (or <code>symbol</code>, <code>size</code>, ...) can be both customized in the scatter chart and <code>visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels both in target series and visualMap-piecewise component itself:\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [30, 100]\n }\n }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels only for target series.\n target: {\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n }\n },\n // Define visual channels only for visualMap-piecewise component.\n controller: {\n inRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels for both target series and visualMap-piecewise component.\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n },\n // Define visual channels only for visualMap-piecewise component, which\n // will overlap the properties with the same name in the above common\n // definition. (symbolSize is overlapped by [30, 100] while color\n // keeps the original value)\n controller: {\n inRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code>color</code>、<code>symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code>opacity</code> is recommended, rather than <code>colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code>Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code>[visaulMap.min, visualMap.max]</code> to a given range of <code>[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code>[visualMap.min, visualMap.max]</code> is set to be <code>[0, 100]</code>, and there is series.data: <code>[50, 10, 100]</code>. We intend to map them to an <code>opacity</code> range <code>[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code>[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code>opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code>[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not <code>dataMin</code> and <code>dataMax</code> in series.data。</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code>Array</code> is used to express the range of visual value, e.g., <code>color: ['#333', '#777']</code>.</p>\n</li>\n<li><p>Single <code>number</code> or single <code>string</code> can also be used, which will be converted to an <code>Array</code> by visualMap component. e.g.: <code>opacity: 0.4</code> will be converted to <code>opacity: [0.4, 0.4]</code>, <code>color: '#333'</code> will be converted to <code>color: ['#333', '#333']</code>.</p>\n</li>\n<li><p>For visual channel <code>symbolSize</code>, <code>opacity</code>, <code>colorAlpha</code>, <code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code>, the range of visual value is always in the form of: <code>[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code>colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code>visualMap.min</code> (if any) will be mapped to lightness <code>0.8</code>, and the dataValue that equals to <code>visualMap.max</code> (if any) will be mapped to lightness <code>0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code>[visualMap.min, visualMap.max]</code> and the range of <code>[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code>color</code>, array is used, like: <code>['#333', '#78ab23', 'blue']</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'#333'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'blue'</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code>symbol</code>, array is used, like: <code>['circle', 'rect', 'diamond']</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'circle'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'diamond'</code>, and other dataValues will be caculated based on the numerical distance to <code>visualMax.min</code> and to <code>visualMap.max</code>, and mapped onto one of <code>'circle'</code>, <code>'rect'</code>, <code>'diamond'</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code>opacity</code>、<code>colorAlpha</code>、<code>colorLightness</code>、<code>colorSaturation</code>，<code>visual value</code></p>\n<p> possible value range is <code>[0, 1]</code>。</p>\n</li>\n<li><p><code>colorHue</code></p>\n<p> possible value range is <code>[0, 360]</code>。</p>\n</li>\n<li><p><code>color</code>：</p>\n<p> color can use RGB expression, like <code>'rgb(128, 128, 128)'</code>, or RGBA expression, like <code>'rgba(128, 128, 128, 0.5)'</code>, or Hex expression, like '#ccc'.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code>Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code>['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']</code>. And there is series.data: <code>['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']</code>. Then we can establish the lookup rule for color: <code>color: {'Warden': 'red', 'Demon Hunter': 'black'}</code>, by which the <code>visualMap</code> component will map <code>dataValue</code> to <code>color</code>.</p>\n<p>How to configure <code>visualMap</code> component to do <code>Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code>Object</code> or <code>Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n type: 'piecewise',\n // categories defines the items that to be displayed in visualMap-piecewise component.\n categories: [\n 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n ],\n inRange: {\n // visual value can be an Object：\n color: {\n 'Warden': 'red',\n 'Demon Hunter': 'black',\n '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',\n // all other dataValues should be mapped to 'green'.\n }\n // visual value can also be a single value,\n // means that all dataValues should be mapped to the value.\n color: 'green',\n // visual value can also be a array, with the same length\n // as the array of categories and one-one mapping onto it.\n color: ['red', 'black', 'green', 'yellow', 'white']\n }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code>setOption</code> to set the initial <code>option</code>), <code>setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n visualMap: {\n inRange: {color: ['red', 'blue']}\n }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code>inRange</code>, <code>outOfRange</code>, <code>target</code>, <code>controller</code>) do not support "merge", that is, anyone among them is modified when use <code>setOption</code> again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to <code>setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code>getOption() -> modify the gotten option -> setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = ['red', 'blue'];\noption.visualMap.controller.inRange.color = ['red', 'blue'];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code>['#f6efa6', '#d88273', '#bf444c']</code> in <code>inRange</code> if you not set <code>inRange</code>. If you dont want it, set <code>inRange: {color: null}</code> to disable it.</p>\n"},"outOfRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code>symbol</code>: Type of symbol.</li>\n<li><code>symbolSize</code>: Symbol size.</li>\n<li><code>color</code>: Symbol color.</li>\n<li><code>colorAlpha</code>: Symbol alpha channel.</li>\n<li><code>opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code>colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code>outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code>visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code>visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code>color</code> (or <code>symbol</code>, <code>size</code>, ...) can be both customized in the scatter chart and <code>visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels both in target series and visualMap-piecewise component itself:\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [30, 100]\n }\n }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels only for target series.\n target: {\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n }\n },\n // Define visual channels only for visualMap-piecewise component.\n controller: {\n outOfRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels for both target series and visualMap-piecewise component.\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n },\n // Define visual channels only for visualMap-piecewise component, which\n // will overlap the properties with the same name in the above common\n // definition. (symbolSize is overlapped by [30, 100] while color\n // keeps the original value)\n controller: {\n outOfRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code>color</code>、<code>symbolSize</code> and ect.) can be defined in outOfRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code>opacity</code> is recommended, rather than <code>colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code>Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code>[visaulMap.min, visualMap.max]</code> to a given range of <code>[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code>[visualMap.min, visualMap.max]</code> is set to be <code>[0, 100]</code>, and there is series.data: <code>[50, 10, 100]</code>. We intend to map them to an <code>opacity</code> range <code>[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code>[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code>opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code>[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not <code>dataMin</code> and <code>dataMax</code> in series.data。</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code>Array</code> is used to express the range of visual value, e.g., <code>color: ['#333', '#777']</code>.</p>\n</li>\n<li><p>Single <code>number</code> or single <code>string</code> can also be used, which will be converted to an <code>Array</code> by visualMap component. e.g.: <code>opacity: 0.4</code> will be converted to <code>opacity: [0.4, 0.4]</code>, <code>color: '#333'</code> will be converted to <code>color: ['#333', '#333']</code>.</p>\n</li>\n<li><p>For visual channel <code>symbolSize</code>, <code>opacity</code>, <code>colorAlpha</code>, <code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code>, the range of visual value is always in the form of: <code>[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code>colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code>visualMap.min</code> (if any) will be mapped to lightness <code>0.8</code>, and the dataValue that equals to <code>visualMap.max</code> (if any) will be mapped to lightness <code>0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code>[visualMap.min, visualMap.max]</code> and the range of <code>[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code>color</code>, array is used, like: <code>['#333', '#78ab23', 'blue']</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'#333'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'blue'</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code>symbol</code>, array is used, like: <code>['circle', 'rect', 'diamond']</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'circle'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'diamond'</code>, and other dataValues will be caculated based on the numerical distance to <code>visualMax.min</code> and to <code>visualMap.max</code>, and mapped onto one of <code>'circle'</code>, <code>'rect'</code>, <code>'diamond'</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code>opacity</code>、<code>colorAlpha</code>、<code>colorLightness</code>、<code>colorSaturation</code>，<code>visual value</code></p>\n<p> possible value range is <code>[0, 1]</code>。</p>\n</li>\n<li><p><code>colorHue</code></p>\n<p> possible value range is <code>[0, 360]</code>。</p>\n</li>\n<li><p><code>color</code>：</p>\n<p> color can use RGB expression, like <code>'rgb(128, 128, 128)'</code>, or RGBA expression, like <code>'rgba(128, 128, 128, 0.5)'</code>, or Hex expression, like '#ccc'.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code>Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code>['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']</code>. And there is series.data: <code>['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']</code>. Then we can establish the lookup rule for color: <code>color: {'Warden': 'red', 'Demon Hunter': 'black'}</code>, by which the <code>visualMap</code> component will map <code>dataValue</code> to <code>color</code>.</p>\n<p>How to configure <code>visualMap</code> component to do <code>Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code>Object</code> or <code>Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n type: 'piecewise',\n // categories defines the items that to be displayed in visualMap-piecewise component.\n categories: [\n 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n ],\n outOfRange: {\n // visual value can be an Object：\n color: {\n 'Warden': 'red',\n 'Demon Hunter': 'black',\n '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',\n // all other dataValues should be mapped to 'green'.\n }\n // visual value can also be a single value,\n // means that all dataValues should be mapped to the value.\n color: 'green',\n // visual value can also be a array, with the same length\n // as the array of categories and one-one mapping onto it.\n color: ['red', 'black', 'green', 'yellow', 'white']\n }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code>setOption</code> to set the initial <code>option</code>), <code>setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n visualMap: {\n inRange: {color: ['red', 'blue']}\n }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code>inRange</code>, <code>outOfRange</code>, <code>target</code>, <code>controller</code>) do not support "merge", that is, anyone among them is modified when use <code>setOption</code> again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to <code>setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code>getOption() -> modify the gotten option -> setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = ['red', 'blue'];\noption.visualMap.controller.inRange.color = ['red', 'blue'];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n"},"controller":{"type":["Object"],"description":"<p>Property <code>inRange</code> and <code>outOfRange</code> can be set within property <code>controller</code>, which means those <code>inRange</code> and <code>outOfRange</code> are only used on the controller (<code>visualMap</code> component itself), but are not used on chart (series). This property is useful in some scenario that the view of controller need to be customized in detail.</p>\n","properties":{"inRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code>symbol</code>: Type of symbol.</li>\n<li><code>symbolSize</code>: Symbol size.</li>\n<li><code>color</code>: Symbol color.</li>\n<li><code>colorAlpha</code>: Symbol alpha channel.</li>\n<li><code>opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code>colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<hr>\n<p><code>inRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code>visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code>visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code>color</code> (or <code>symbol</code>, <code>size</code>, ...) can be both customized in the scatter chart and <code>visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels both in target series and visualMap-piecewise component itself:\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [30, 100]\n }\n }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels only for target series.\n target: {\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n }\n },\n // Define visual channels only for visualMap-piecewise component.\n controller: {\n inRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels for both target series and visualMap-piecewise component.\n inRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n },\n // Define visual channels only for visualMap-piecewise component, which\n // will overlap the properties with the same name in the above common\n // definition. (symbolSize is overlapped by [30, 100] while color\n // keeps the original value)\n controller: {\n inRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code>color</code>、<code>symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code>opacity</code> is recommended, rather than <code>colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code>Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code>[visaulMap.min, visualMap.max]</code> to a given range of <code>[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code>[visualMap.min, visualMap.max]</code> is set to be <code>[0, 100]</code>, and there is series.data: <code>[50, 10, 100]</code>. We intend to map them to an <code>opacity</code> range <code>[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code>[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code>opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code>[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not <code>dataMin</code> and <code>dataMax</code> in series.data。</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code>Array</code> is used to express the range of visual value, e.g., <code>color: ['#333', '#777']</code>.</p>\n</li>\n<li><p>Single <code>number</code> or single <code>string</code> can also be used, which will be converted to an <code>Array</code> by visualMap component. e.g.: <code>opacity: 0.4</code> will be converted to <code>opacity: [0.4, 0.4]</code>, <code>color: '#333'</code> will be converted to <code>color: ['#333', '#333']</code>.</p>\n</li>\n<li><p>For visual channel <code>symbolSize</code>, <code>opacity</code>, <code>colorAlpha</code>, <code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code>, the range of visual value is always in the form of: <code>[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code>colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code>visualMap.min</code> (if any) will be mapped to lightness <code>0.8</code>, and the dataValue that equals to <code>visualMap.max</code> (if any) will be mapped to lightness <code>0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code>[visualMap.min, visualMap.max]</code> and the range of <code>[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code>color</code>, array is used, like: <code>['#333', '#78ab23', 'blue']</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'#333'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'blue'</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code>symbol</code>, array is used, like: <code>['circle', 'rect', 'diamond']</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'circle'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'diamond'</code>, and other dataValues will be caculated based on the numerical distance to <code>visualMax.min</code> and to <code>visualMap.max</code>, and mapped onto one of <code>'circle'</code>, <code>'rect'</code>, <code>'diamond'</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code>opacity</code>、<code>colorAlpha</code>、<code>colorLightness</code>、<code>colorSaturation</code>，<code>visual value</code></p>\n<p> possible value range is <code>[0, 1]</code>。</p>\n</li>\n<li><p><code>colorHue</code></p>\n<p> possible value range is <code>[0, 360]</code>。</p>\n</li>\n<li><p><code>color</code>：</p>\n<p> color can use RGB expression, like <code>'rgb(128, 128, 128)'</code>, or RGBA expression, like <code>'rgba(128, 128, 128, 0.5)'</code>, or Hex expression, like '#ccc'.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code>Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code>['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']</code>. And there is series.data: <code>['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']</code>. Then we can establish the lookup rule for color: <code>color: {'Warden': 'red', 'Demon Hunter': 'black'}</code>, by which the <code>visualMap</code> component will map <code>dataValue</code> to <code>color</code>.</p>\n<p>How to configure <code>visualMap</code> component to do <code>Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code>Object</code> or <code>Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n type: 'piecewise',\n // categories defines the items that to be displayed in visualMap-piecewise component.\n categories: [\n 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n ],\n inRange: {\n // visual value can be an Object：\n color: {\n 'Warden': 'red',\n 'Demon Hunter': 'black',\n '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',\n // all other dataValues should be mapped to 'green'.\n }\n // visual value can also be a single value,\n // means that all dataValues should be mapped to the value.\n color: 'green',\n // visual value can also be a array, with the same length\n // as the array of categories and one-one mapping onto it.\n color: ['red', 'black', 'green', 'yellow', 'white']\n }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code>setOption</code> to set the initial <code>option</code>), <code>setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n visualMap: {\n inRange: {color: ['red', 'blue']}\n }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code>inRange</code>, <code>outOfRange</code>, <code>target</code>, <code>controller</code>) do not support "merge", that is, anyone among them is modified when use <code>setOption</code> again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to <code>setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code>getOption() -> modify the gotten option -> setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = ['red', 'blue'];\noption.visualMap.controller.inRange.color = ['red', 'blue'];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code>['#f6efa6', '#d88273', '#bf444c']</code> in <code>inRange</code> if you not set <code>inRange</code>. If you dont want it, set <code>inRange: {color: null}</code> to disable it.</p>\n"},"outOfRange":{"type":["Object"],"description":"<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. (User can interact with visualMap component and make a seleced range by mouse or touch.)</p>\n<p>Possiable visual channels includes:</p>\n<ul>\n<li><code>symbol</code>: Type of symbol.</li>\n<li><code>symbolSize</code>: Symbol size.</li>\n<li><code>color</code>: Symbol color.</li>\n<li><code>colorAlpha</code>: Symbol alpha channel.</li>\n<li><code>opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code>colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><code>outOfRange</code> could customize visual channels both in series (by <a href=\"#visualMap-piecewise.seriesIndex\">visualMap-piecewise.seriesIndex</a>) and in <code>visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code>visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code>color</code> (or <code>symbol</code>, <code>size</code>, ...) can be both customized in the scatter chart and <code>visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels both in target series and visualMap-piecewise component itself:\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [30, 100]\n }\n }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels only for target series.\n target: {\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n }\n },\n // Define visual channels only for visualMap-piecewise component.\n controller: {\n outOfRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class=\"lang-javascript\">visualMap: [\n {\n ...,\n // Define visual channels for both target series and visualMap-piecewise component.\n outOfRange: {\n color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],\n symbolSize: [60, 200]\n },\n // Define visual channels only for visualMap-piecewise component, which\n // will overlap the properties with the same name in the above common\n // definition. (symbolSize is overlapped by [30, 100] while color\n // keeps the original value)\n controller: {\n outOfRange: {\n symbolSize: [30, 100]\n }\n }\n }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code>color</code>、<code>symbolSize</code> and ect.) can be defined in outOfRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code>opacity</code> is recommended, rather than <code>colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: 'Linear Mapping' and 'Table Mapping'.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code>Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code>[visaulMap.min, visualMap.max]</code> to a given range of <code>[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code>[visualMap.min, visualMap.max]</code> is set to be <code>[0, 100]</code>, and there is series.data: <code>[50, 10, 100]</code>. We intend to map them to an <code>opacity</code> range <code>[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code>[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code>opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code>[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by defualt, but not <code>dataMin</code> and <code>dataMax</code> in series.data。</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href=\"#visualMap-continuous\">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code>Array</code> is used to express the range of visual value, e.g., <code>color: ['#333', '#777']</code>.</p>\n</li>\n<li><p>Single <code>number</code> or single <code>string</code> can also be used, which will be converted to an <code>Array</code> by visualMap component. e.g.: <code>opacity: 0.4</code> will be converted to <code>opacity: [0.4, 0.4]</code>, <code>color: '#333'</code> will be converted to <code>color: ['#333', '#333']</code>.</p>\n</li>\n<li><p>For visual channel <code>symbolSize</code>, <code>opacity</code>, <code>colorAlpha</code>, <code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code>, the range of visual value is always in the form of: <code>[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code>colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code>visualMap.min</code> (if any) will be mapped to lightness <code>0.8</code>, and the dataValue that equals to <code>visualMap.max</code> (if any) will be mapped to lightness <code>0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code>[visualMap.min, visualMap.max]</code> and the range of <code>[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code>color</code>, array is used, like: <code>['#333', '#78ab23', 'blue']</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'#333'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'blue'</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code>symbol</code>, array is used, like: <code>['circle', 'rect', 'diamond']</code>, where the dataValue that equals to <code>visualMap.min</code> will be mapped onto <code>'circle'</code>, the dataValue that equals to <code>visualMap.max</code> will be mapped onto <code>'diamond'</code>, and other dataValues will be caculated based on the numerical distance to <code>visualMax.min</code> and to <code>visualMap.max</code>, and mapped onto one of <code>'circle'</code>, <code>'rect'</code>, <code>'diamond'</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code>opacity</code>、<code>colorAlpha</code>、<code>colorLightness</code>、<code>colorSaturation</code>，<code>visual value</code></p>\n<p> possible value range is <code>[0, 1]</code>。</p>\n</li>\n<li><p><code>colorHue</code></p>\n<p> possible value range is <code>[0, 360]</code>。</p>\n</li>\n<li><p><code>color</code>：</p>\n<p> color can use RGB expression, like <code>'rgb(128, 128, 128)'</code>, or RGBA expression, like <code>'rgba(128, 128, 128, 0.5)'</code>, or Hex expression, like '#ccc'.</p>\n</li>\n<li><p><code>symbol</code>：</p>\n</li>\n</ul>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code>Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> component, <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a> is set to <code>['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']</code>. And there is series.data: <code>['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']</code>. Then we can establish the lookup rule for color: <code>color: {'Warden': 'red', 'Demon Hunter': 'black'}</code>, by which the <code>visualMap</code> component will map <code>dataValue</code> to <code>color</code>.</p>\n<p>How to configure <code>visualMap</code> component to do <code>Table Mapping</code>?</p>\n<p>When use <a href=\"#visualMap-piecewise\">visualMap-piecewise</a> and <a href=\"#visualMap-piecewise.categories\">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code>Object</code> or <code>Array</code> is used, for instance:</p>\n<pre><code class=\"lang-javascript\">visualMap: {\n type: 'piecewise',\n // categories defines the items that to be displayed in visualMap-piecewise component.\n categories: [\n 'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'\n ],\n outOfRange: {\n // visual value can be an Object：\n color: {\n 'Warden': 'red',\n 'Demon Hunter': 'black',\n '': 'green' // Blank string means that except 'Warden' and 'Demon Hunter',\n // all other dataValues should be mapped to 'green'.\n }\n // visual value can also be a single value,\n // means that all dataValues should be mapped to the value.\n color: 'green',\n // visual value can also be a array, with the same length\n // as the array of categories and one-one mapping onto it.\n color: ['red', 'black', 'green', 'yellow', 'white']\n }\n}\n</code></pre>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/scatter-visualMap-categories&edit=1&reset=1\" target=\"_blank\">Example</a></p>\n<hr>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code>setOption</code> to set the initial <code>option</code>), <code>setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class=\"lang-javascript\">chart.setOption({\n visualMap: {\n inRange: {color: ['red', 'blue']}\n }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code>inRange</code>, <code>outOfRange</code>, <code>target</code>, <code>controller</code>) do not support "merge", that is, anyone among them is modified when use <code>setOption</code> again, all of the original values of them will not be kept but erased. The "merge" brings complication in implemnentation and understanding, whereas "erase all" normalize the practise: once you want to modify some visual values, you should pass all of them to <code>setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code>getOption() -> modify the gotten option -> setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = ['red', 'blue']; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = ['red', 'blue'];\noption.visualMap.controller.inRange.color = ['red', 'blue'];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n"}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":4},"left":{"type":["string","number"],"description":"<p>Distance between visualMap component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":0},"top":{"type":["string","number"],"description":"<p>Distance between visualMap component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"auto"},"right":{"type":["string","number"],"description":"<p>Distance between visualMap component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":"auto"},"bottom":{"type":["string","number"],"description":"<p>Distance between visualMap component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":0},"orient":{"type":["string"],"description":"<p>How to layout the visualMap component, <code>'horizontal'</code> or <code>'vertical'</code>.</p>\n","default":"'vertical'"},"padding":{"type":["number","Array"],"description":"<p>visualMap-piecewise space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"backgroundColor":{"type":["Color"],"description":"<p>background color of visualMap component.</p>\n","default":"'rgba(0,0,0,0)'"},"borderColor":{"type":["Color"],"description":"<p>border color of visualMap component.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>border width of visualMap component, with unit: px.</p>\n","default":0},"color":{"type":["Array"],"description":"<p>This property is remained only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a>, or <a href=\"#visualMap-piecewise.outOfRange\">visualMap-piecewise.outOfRange</a> if needed.</p>\n<p>If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property <code>color</code> is from <code>large</code> to <code>small</code>, whereas that in <a href=\"#visualMap-piecewise.inRange\">visualMap-piecewise.inRange</a> or <a href=\"#visualMap-piecewise.outOfRange\">visualMap-piecewise.outOfRange</a> is from <code>small</code> to <code>large</code>.</p>\n","default":"['#bf444c', '#d88273', '#f6efa6']"},"textStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>visualMap text color.</p>\n","default":"#333"},"fontStyle":{"type":["string"],"description":"<p>visualMap font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>visualMap font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>visualMap font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>visualMap font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"formatter":{"type":["string","Function"],"description":"<p>the formatter tool for label.</p>\n<ul>\n<li><p>If it was set as a <code>string</code>, it refers to a template, for instance: <code>aaaa{value}bbbb{value2}</code>, where <code>{value}</code> and <code>{value2}</code> represents the current seleted range of dataValues.</p>\n</li>\n<li><p>If it was set as a <code>Function</code>, it refers to a callback function, for instance:</p>\n</li>\n</ul>\n<pre><code class=\"lang-javascript\">formatter: function (value, value2) {\n return 'aaaa' + value + 'bbbb' + value2;\n}\n</code></pre>\n"}}}]},"description":"<p><code>visualMap</code> is a type of component for visual encoding, which maps the data to visual channels, including:</p>\n<ul>\n<li><code>symbol</code>: Type of symbol.</li>\n<li><code>symbolSize</code>: Symbol size.</li>\n<li><code>color</code>: Symbol color.</li>\n<li><code>colorAlpha</code>: Symbol alpha channel.</li>\n<li><code>opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code>colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p>Myltiple <code>visualMap</code> component could be defined in a chart instance, which enable that different dimensions of a series data are mapped to different visual channels.</p>\n<p><code>visualMap</code> could be defined as <a href=\"#visualMap-piecewise\">Piecewise (visualMapPiecewise)</a> or <a href=\"#visualMap-continuous\">Continuous (visualMapContinuous)</a>, which is distinguished by the property <code>type</code>. For instance:</p>\n<pre><code class=\"lang-javascript\">option = {\n visualMap: [\n { // the first visualMap component\n type: 'continuous', // defined to be continuous visualMap\n ...\n },\n { // the second visualMap component\n type: 'piecewise', // defined to be piecewise visualMap\n ...\n }\n ],\n ...\n};\n</code></pre>\n<p><br>\n<strong>✦ Configure mapping ✦</strong></p>\n<p>The dimension of <a href=\"#series.data\">series.data</a> can be specified by <a href=\"#visualMap.dimension\">visualMap.dimension</a>, from which the value can be retrieved and mapped onto visual channels, which can be defined in <a href=\"#visualMap.inRange\">visualMap.inRange</a> and <a href=\"#visualMap.outOfRange\">visualMap.outOfRange</a>.</p>\n<p><br>\nIn series that controlled by visualMap, if a data item needs to escape from controlled by visualMap, you can set like this:</p>\n<pre><code>series: {\n type: '...',\n data: [\n {name: 'Shanghai', value: 251},\n {name: 'Haikou', value: 21},\n // Mark as `visualMap: false`, then this item does not controlled by visualMap any more,\n // and series visual config (like color, symbol, ...) can be used to this item.\n {name: 'Beijing', value: 821, },\n ...\n ]\n}\n</code></pre><p><br>\n<strong>✦ The relationship between visualMap of ECharts3 and dataRange of ECharts2 ✦</strong></p>\n<p><code>visualMap</code> is renamed from the <code>dataRange</code> of ECharts2, and the scope of functionalities are extended a lot. The configurations of <code>dataRange</code> are still compatible in ECharts3, which automatically convert them to <code>visualMap</code>. It is recommended to use <code>visualMap</code> instead of <code>dataRange</code> in ECharts3.</p>\n<p><br>\n<strong>✦ The detailed configurations of visualMap are elaborated as follows. ✦</strong></p>\n<p><br>\n<br></p>\n","properties":{}},"tooltip":{"type":["Object"],"description":"<p>Tooltip component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code>series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'item'</code></p>\n<p> Triggered by data item, which is mainly used for charts that don't have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code>'axis'</code></p>\n<p> Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href=\"#grid\">grid</a> or <a href=\"#polar\">polar</a>. Also, you may assign axis with <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a>.</p>\n</li>\n<li><p><code>'none'</code></p>\n<p> Trigger nothing.</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>Configuration item for axis indicator.</p>\n<p><code>tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code>someAxis.axisPointer</code>. But in common cases, using <code>tooltip.axisPinter</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code>tooltip.axisPointer</code> has lower priority than that of <code>someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code>axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\" ></iframe>\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code>axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code>tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>。</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code>someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code>true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code>'axis'</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code>'cross'</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code>axis.axisPointer</code> will override <code>tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code>someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code>true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code>'cross'</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code>someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code>true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code>'none'</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code>true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'line'</code> line indicator.</p>\n</li>\n<li><p><code>'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code>'none'</code> no indicator displayed.</p>\n</li>\n<li><p><code>'cross'</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>The coordinate axis, which could be <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, or <code>'angle'</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>'2'</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: 'some text {value} some text</code>, where <code>{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code>function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code>{Object}</code> params: Including fields as follows:</p>\n<p><code>{Object}</code> params.value: current value of this axis. If <code>axis.type</code> is <code>'category'</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>'time'</code>, it is a timestamp.</p>\n<p><code>{Array.<Object>}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code>{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code>'x'</code>, <code>'y'</code>, and in polar it will be <code>'radius'</code>, <code>'angle'</code>.</p>\n<p><code>{number}</code> params.axisIndex: The index of the axis, for example, <code>0</code>,<code>1</code>, <code>2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // The current value of axisPointer\n axisValueLabel: 'text of value'\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // If axis.type is 'time'\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'line'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'shadow'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'cross'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":200},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"showContent":{"type":["boolean"],"description":"<p>Whether to show the tooltip floating layer, whose default value is true. It should be configurated to be <code>false</code>, if you only need tooltip to trigger the event or show the axisPointer without content.</p>\n","default":true},"alwaysShowContent":{"type":["boolean"],"description":"<p>Whether to show tooltip content all the time. By default, it will be hidden <a href=\"#tooltip.hideDelay\">after some time</a>. It can be set to be <code>true</code> to preserve displaying.</p>\n<p>This attribute is newly added to ECharts 3.0.</p>\n","default":false},"triggerOn":{"type":["string"],"description":"<p>Conditions to trigger tooltip. Options:</p>\n<ul>\n<li><p><code>'mousemove'</code></p>\n<p> Trigger when mouse moves.</p>\n</li>\n<li><p><code>'click'</code></p>\n<p> Trigger when mouse clicks.</p>\n</li>\n<li><p><code>'mousemove|click'</code></p>\n<p> Trigger when mouse clicks and moves.</p>\n</li>\n<li><p><code>'none'</code></p>\n<p> Do not triggered by <code>'mousemove'</code> and <code>'click'</code>. Tooltip can be triggered and hidden manually by calling <a href=\"api.html#action.tooltip.showTip\" target=\"_blank\">action.tooltip.showTip</a> and <a href=\"api.html#action.tooltip.hideTip\" target=\"_blank\">action.tooltip.hideTip</a>. It can also be triggered by <a href=\"#xAxis.axisPointer.handle\">axisPointer.handle</a> in this case.</p>\n</li>\n</ul>\n<p>This attribute is new to ECharts 3.0.</p>\n","default":"'mousemove|click'"},"showDelay":{"type":["number"],"description":"<p>Delay time for showing tooltip, in ms. No delay by default, and it is not recommended to set. Only valid when <a href=\"#tooltip.triggerOn\">triggerOn</a> is set to be <code>'mousemove'</code>.</p>\n","default":0},"hideDelay":{"type":["number"],"description":"<p>Delay time for hiding tooltip, in ms. It will be invalid when <a href=\"#tooltip.alwaysShowContent\">alwaysShowContent</a> is <code>true</code>.</p>\n","default":100},"enterable":{"type":["boolean"],"description":"<p>Whether mouse is allowed to enter the floating layer of tooltip, whose default value is false. If you need to interact in the tooltip like with links or buttons, it can be set as <code>true</code>.</p>\n","default":true},"renderMode":{"type":["string"],"description":"<p>Render mode for tooltip. By default, it is set to be <code>'html'</code> so that extra DOM element is used for tooltip. It can also set to be <code>'richText'</code> so that the tooltip will be rendered inside Canvas (SVG rich text is not implemented yet). This is very useful for environments that don't have DOM, such as Wechat applications.</p>\n","default":"'html'"},"confine":{"type":["boolean"],"description":"<p>Whether confine tooltip content in the view rect of chart instance.</p>\n<p>Useful when tooltip is cut because of <code>'overflow: hidden'</code> set on outer dom of chart instance, or because of narrow screen on mobile.</p>\n","default":false},"transitionDuration":{"type":["number"],"description":"<p>The transition duration of tooltip's animation, in seconds. When it is set to be 0, it would move closely with the mouse.</p>\n","default":0.4},"position":{"type":["string","Array"],"description":"<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}},"axisPointer":{"type":["Object"],"description":"<p>This is the global configurations of axisPointer.</p>\n<hr>\n<p><code>axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\" ></iframe>\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code>axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code>tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>。</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code>someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code>true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code>'axis'</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code>'cross'</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code>axis.axisPointer</code> will override <code>tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code>someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code>true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code>'cross'</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code>someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code>true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code>'none'</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code>true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n<hr>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code>'axis'</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'line'</code> line indicator.</p>\n</li>\n<li><p><code>'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code>'none'</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>'2'</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: 'some text {value} some text</code>, where <code>{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code>function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code>{Object}</code> params: Including fields as follows:</p>\n<p><code>{Object}</code> params.value: current value of this axis. If <code>axis.type</code> is <code>'category'</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>'time'</code>, it is a timestamp.</p>\n<p><code>{Array.<Object>}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code>{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code>'x'</code>, <code>'y'</code>, and in polar it will be <code>'radius'</code>, <code>'angle'</code>.</p>\n<p><code>{number}</code> params.axisIndex: The index of the axis, for example, <code>0</code>,<code>1</code>, <code>2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // The current value of axisPointer\n axisValueLabel: 'text of value'\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // If axis.type is 'time'\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'line'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'shadow'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code>value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code>'show'</code> 和 <code>'hide'</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code>true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&edit=1&reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code>[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"link":{"type":["Array"],"description":"<p>axisPointers can be linked to each other. The term "link" represents that axes are synchronized and move together. Axes are linked according to the value of axisPointer.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/view.html?c=candlestick-brush&edit=1&reset=1\" target=\"_blank\">sampleA</a> and <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-nutrients-matrix&edit=1&reset=1\" target=\"_blank\">sampleB</a>。</p>\n<p>link is an array, where each item represents a "link group". Axes will be linked when they are refered in the same link group. For example:</p>\n<pre><code class=\"lang-js\">link: [\n {\n // All axes with xAxisIndex 0, 3, 4 and yAxisName 'sameName' will be linked.\n xAxisIndex: [0, 3, 4],\n yAxisName: 'someName'\n },\n {\n // All axes with xAxisId 'aa', 'cc' and all angleAxis will be linked.\n xAxisId: ['aa', 'cc'],\n angleAxis: 'all'\n },\n ...\n]\n</code></pre>\n<p>As illustrated above, axes can be refered in these approaches in a link group:</p>\n<pre><code class=\"lang-js\">{\n // 'some' represent the dimension name of a axis, namely, 'x', 'y', 'radius', 'angle', 'single'\n someAxisIndex: [...], // can be an array or a value or 'all'\n someAxisName: [...], // can be an array or a value or 'all'\n someAxisId: [...], // can be an array or a value or 'all'\n}\n</code></pre>\n<hr>\n<hr>\n<p><strong>How to link axes with different <a href=\"#xAxis.type\">axis.type</a>?</strong></p>\n<p>For example, the type of axisA is 'category', and the type of axisB type is 'time', we can write conversion function (mapper) in link group to convert values from an axie to another axis. For example:</p>\n<pre><code class=\"lang-js\">link: [{\n xAxisIndex: [0, 1],\n yAxisName: ['yy'],\n mapper: function (sourceVal, sourceAxisInfo, targetAxisInfo) {\n if (sourceAxisInfo.axisName === 'yy') {\n // from timestamp to '2012-02-05'\n return echarts.format.formatTime('yyyy-MM-dd', sourceVal);\n }\n else if (targetAxisInfo.axisName === 'yy') {\n // from '2012-02-05' to date\n return echarts.number.parseDate(dates[sourceVal]);\n }\n else {\n return sourceVal;\n }\n }\n}]\n</code></pre>\n<p>Input parameters of mapper:</p>\n<p><code>{number}</code> sourceVal</p>\n<p><code>{Object}</code> sourceAxisInfo Including {axisDim, axisId, axisName, axisIndex, ...}</p>\n<p><code>{Object}</code> targetAxisInfo Including {axisDim, axisId, axisName, axisIndex, ...}</p>\n<p>Return of mapper:</p>\n<p><code>{number}</code> The result of conversion.</p>\n"},"triggerOn":{"type":["string"],"description":"<p>Conditions to trigger tooltip. Options:</p>\n<ul>\n<li><p><code>'mousemove'</code></p>\n<p> Trigger when mouse moves.</p>\n</li>\n<li><p><code>'click'</code></p>\n<p> Trigger when mouse clicks.</p>\n</li>\n<li><p><code>'mousemove|click'</code></p>\n<p> Trigger when mouse clicks and moves.</p>\n</li>\n<li><p><code>'none'</code></p>\n<p> Do not triggered by <code>'mousemove'</code> and <code>'click'</code></p>\n</li>\n</ul>\n","default":"'mousemove|click'"}}},"toolbox":{"type":["Object"],"description":"<p>A group of utility tools, which includes <a href=\"#toolbox.feature.saveAsImage\">export</a>, <a href=\"#toolbox.feature.dataView\">data view</a>, <a href=\"#toolbox.feature.magicType\">dynamic type switching</a>, <a href=\"#toolbox.feature.dataZoom\">data area zooming</a>, and <a href=\"#toolbox.feature.reset\">reset</a>.</p>\n<p><strong>Example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-marker&reset=1&edit=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Whether to show toolbox component.</p>\n","default":true},"orient":{"type":["string"],"description":"<p>The layout orientation of toolbox's icon.</p>\n<p>Options:</p>\n<ul>\n<li>'horizontal'</li>\n<li>'vertical'</li>\n</ul>\n","default":"'horizontal'"},"itemSize":{"type":["number"],"description":"<p>The size of toolbox's icon.</p>\n","default":15},"itemGap":{"type":["number"],"description":"<p>The gap between each icon of toolbox. It is horizontal gap in horizontal layout, while vertical gap in vertical layout.</p>\n","default":10},"showTitle":{"type":["boolean"],"description":"<p>Whether to show the title of each tool icon when mouse hovers.</p>\n","default":true},"feature":{"type":["Object"],"description":"<p>The configuration item for each tool.</p>\n<p>Besides the tools we provide, user-defined toolbox is also supported.</p>\n<p>Notes: User-defined tool name could only start with <code>my</code>, like <code>myTool1</code> and <code>myTool2</code> in the below example:</p>\n<pre><code class=\"lang-javascript\">{\n toolbox: {\n feature: {\n myTool1: {\n show: true,\n title: 'custom extension method 1',\n icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',\n onclick: function (){\n alert('myToolHandler1')\n }\n },\n myTool2: {\n show: true,\n title: 'custom extension method',\n icon: 'image://http://echarts.baidu.com/images/favicon.png',\n onclick: function (){\n alert('myToolHandler2')\n }\n }\n }\n }\n}\n</code></pre>\n","properties":{"saveAsImage":{"type":["Object"],"description":"<p>Save as image.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Format to save the image in, which supports<code>'png'</code> and <code>'jpeg'</code>.</p>\n","default":"'png'"},"name":{"type":["string"],"description":"<p>Name to save the image, whose default value is <a href=\"#title.text\">title.text</a>.</p>\n"},"backgroundColor":{"type":["Color"],"description":"<p>Background color to save the image, whose default value is <a href=\"#backgroundColor\">backgroundColor</a>. If <code>backgroundColor</code> is not set, white color is used.</p>\n","default":"'auto'"},"connectedBackgroundColor":{"type":["Color"],"description":"<p>When <a href=\"api.html#echarts.connect\" target=\"_blank\">echarts.connect</a> is used to connect the interaction of multiple chart series, they will all be included in the exported image. This option sets the background color between these charts.</p>\n","default":"'#fff'"},"excludeComponents":{"type":["Array"],"description":"<p>Components to be excluded when export. By default, toolbox is excluded.</p>\n","default":"['toolbox']"},"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"title":{"type":["string"],"description":"","default":"'save as image'"},"icon":{"type":["*"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"iconStyle":{"type":["Object"],"description":"<p>The style setting of save as image icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code>emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code>'left'</code> / <code>'right'</code> / <code>'top'</code> / <code>'bottom'</code>。</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and <code>'#000'</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code>'left'</code> / <code>'center'</code> / <code>'right'</code>。</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"pixelRatio":{"type":["number"],"description":"<p>Resolution ratio to save image, whose default value is that of the container. Values larger than 1 (e.g.: 2) is supported when you need higher resolution.</p>\n","default":1}}},"restore":{"type":["Object"],"description":"<p>Restore configuration item.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"title":{"type":["string"],"description":"","default":"'restore'"},"icon":{"type":["*"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"iconStyle":{"type":["Object"],"description":"<p>The style setting of restore icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code>emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code>'left'</code> / <code>'right'</code> / <code>'top'</code> / <code>'bottom'</code>。</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and <code>'#000'</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code>'left'</code> / <code>'center'</code> / <code>'right'</code>。</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}}}},"dataView":{"type":["Object"],"description":"<p>Data view tool, which could display data in current chart and updates chart after being edited.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"title":{"type":["string"],"description":"","default":"'data view'"},"icon":{"type":["*"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"iconStyle":{"type":["Object"],"description":"<p>The style setting of data view icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code>emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code>'left'</code> / <code>'right'</code> / <code>'top'</code> / <code>'bottom'</code>。</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and <code>'#000'</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code>'left'</code> / <code>'center'</code> / <code>'right'</code>。</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"readOnly":{"type":["boolean"],"description":"<p>Whether it is read-only.</p>\n","default":false},"optionToContent":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(option:Object) => HTMLDomElement|string\n</code></pre>\n<p>Define a function to present dataView. It is used to replace default textarea for richer data editing. It can return a DOM object, or an HTML string.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">optionToContent: function(opt) {\n var axisData = opt.xAxis[0].data;\n var series = opt.series;\n var table = '<table style="width:100%;text-align:center"><tbody><tr>'\n + '<td>Time:</td>'\n + '<td>' + series[0].name + '</td>'\n + '<td>' + series[1].name + '</td>'\n + '</tr>';\n for (var i = 0, l = axisData.length; i < l; i++) {\n table += '<tr>'\n + '<td>' + axisData[i] + '</td>'\n + '<td>' + series[0].data[i] + '</td>'\n + '<td>' + series[1].data[i] + '</td>'\n + '</tr>';\n }\n table += '</tbody></table>';\n return table;\n}\n</code></pre>\n"},"contentToOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(container:HTMLDomElement, option:Object) => Object\n</code></pre>\n<p>When optionToContent is used, if you want to support refreshing chart after data changes, you need to implement the logic to merge options in this function.</p>\n"},"lang":{"type":["Array"],"description":"<p>There are 3 names in data view, which are <code>['data view', 'turn off' and 'refresh']</code>.</p>\n","default":"['data view', 'turn off', 'refresh']"},"backgroundColor":{"type":["string"],"description":"<p>Background color of the floating layer in data view.</p>\n","default":"'#fff'"},"textareaColor":{"type":["string"],"description":"<p>Background color of input area of the floating layer in data view.</p>\n","default":"'#fff'"},"textareaBorderColor":{"type":["string"],"description":"<p>Border color of input area of the floating layer in data view.</p>\n","default":"'#333'"},"textColor":{"type":["string"],"description":"<p>Text color.</p>\n","default":"'#000'"},"buttonColor":{"type":["string"],"description":"<p>Button color.</p>\n","default":"'#c23531'"},"buttonTextColor":{"type":["string"],"description":"<p>Color of button text.</p>\n","default":"'#fff'"}}},"dataZoom":{"type":["Object"],"description":"<p>Data area zooming, which only supports rectangular coordinate by now.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"title":{"type":["Object"],"description":"<p>Restored and zoomed title text.</p>\n","properties":{"zoom":{"type":["string"],"description":"","default":"'area zooming'"},"back":{"type":["string"],"description":"","default":"'restore area zooming'"}}},"icon":{"type":["Object"],"description":"<p>Zooming and restore icon path.</p>\n","properties":{"zoom":{"type":["string"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"back":{"type":["string"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"}}},"iconStyle":{"type":["Object"],"description":"<p>The style setting of data area zooming icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code>emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code>'left'</code> / <code>'right'</code> / <code>'top'</code> / <code>'bottom'</code>。</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and <code>'#000'</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code>'left'</code> / <code>'center'</code> / <code>'right'</code>。</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"xAxisIndex":{"type":["number","Array","boolean"],"description":"<p>Defines which <a href=\"#xAxis\">xAxis</a> should be controlled. By default, it controls all x axes. If it is set to be <code>false</code>, then no x axis is controlled. If it is set to be then it controls axis with axisIndex of <code>3</code>. If it is set to be <code>[0, 3]</code>, it controls the x-axes with axisIndex of <code>0</code> and <code>3</code>.</p>\n"},"yAxisIndex":{"type":["number","Array","boolean"],"description":"<p>Defines which <a href=\"#yAxis\">yAxis</a> should be controlled. By default, it controls all y axes. If it is set to be <code>false</code>, then no y axis is controlled. If it is set to be then it controls axis with axisIndex of <code>3</code>. If it is set to be <code>[0, 3]</code>, it controls the x-axes with axisIndex of <code>0</code> and <code>3</code>.</p>\n"}}},"magicType":{"type":["Object"],"description":"<p>Magic type switching.\n<strong>示例: </strong></p>\n<pre><code class=\"lang-js\">feature: {\n magicType: {\n type: ['line', 'bar', 'stack', 'tiled']\n }\n}\n</code></pre>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tool.</p>\n","default":true},"type":{"type":["Array"],"description":"<p>Enabled magic types, including <code>'line'</code> (for line charts), <code>'bar'</code> (for bar charts), <code>'stack'</code> (for stacked charts), and <code>'tiled'</code> (for tiled charts).</p>\n"},"title":{"type":["Object"],"description":"<p>Title for different types, can be configured seperately.</p>\n","properties":{"line":{"type":["string"],"description":"","default":"'for line charts'"},"bar":{"type":["string"],"description":"","default":"'for bar charts'"},"stack":{"type":["string"],"description":"","default":"'for stacked charts'"},"tiled":{"type":["string"],"description":"","default":"'for tiled charts'"}}},"icon":{"type":["Object"],"description":"<p>the different types of icon path , which could be configurated individually.</p>\n","properties":{"line":{"type":["string"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"bar":{"type":["string"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"stack":{"type":["string"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"tiled":{"type":["string"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"}}},"iconStyle":{"type":["Object"],"description":"<p>The style setting of magic type switching icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code>emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code>'left'</code> / <code>'right'</code> / <code>'top'</code> / <code>'bottom'</code>。</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and <code>'#000'</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code>'left'</code> / <code>'center'</code> / <code>'right'</code>。</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"option":{"type":["Object"],"description":"<p>Configuration item for each type, which will be used when switching to certain type.</p>\n","properties":{"line":{"type":["Object"],"description":""},"bar":{"type":["Object"],"description":""},"stack":{"type":["Object"],"description":""},"tiled":{"type":["Object"],"description":""}}},"seriesIndex":{"type":["Object"],"description":"<p>Series list for each type.</p>\n","properties":{"line":{"type":["Array"],"description":""},"bar":{"type":["Array"],"description":""},"stack":{"type":["Array"],"description":""},"tiled":{"type":["Array"],"description":""}}}}},"brush":{"type":["Object"],"description":"<p>Brush-selecting icon.</p>\n<p>It can also be configured at <a href=\"#brush.toolbox\">brush.toolbox</a>.</p>\n","properties":{"type":{"type":["Array"],"description":"<p>Icons used, whose values are:</p>\n<ul>\n<li><code>'rect'</code>: Enabling selecting with rectangle area.</li>\n<li><code>'polygon'</code>: Enabling selecting with any shape.</li>\n<li><code>'lineX'</code>: Enabling horizontal selecting.</li>\n<li><code>'lineY'</code>: Enabling vertical selecting.</li>\n<li><code>'keep'</code>: Switching between <em>single selecting</em> and <em>multiple selecting</em>. The latter one can select multiple areas, while the former one cancels previous selection.</li>\n<li><code>'clear'</code>: Clearing all selection.</li>\n</ul>\n"},"icon":{"type":["Object"],"description":"<p>Icon path for each icon.</p>\n","properties":{"rect":{"type":["string"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"polygon":{"type":["string"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"lineX":{"type":["string"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"lineY":{"type":["string"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"keep":{"type":["string"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"clear":{"type":["string"],"description":"<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"}}},"title":{"type":["Object"],"description":"<p>Title.</p>\n","properties":{"rect":{"type":["string"],"description":"","default":"'Rectangle selection'"},"polygon":{"type":["string"],"description":"","default":"'Polygon selection'"},"lineX":{"type":["string"],"description":"","default":"'Horizontal selection'"},"lineY":{"type":["string"],"description":"","default":"'Vertical selection'"},"keep":{"type":["string"],"description":"","default":"'Keep previous selection'"},"clear":{"type":["string"],"description":"","default":"'Clear selection'"}}}}}}},"iconStyle":{"type":["Object"],"description":"<p>The style setting of Shared icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code>emphasis</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"#666"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"iconStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textPosition":{"type":["string"],"description":"<p>Text position: <code>'left'</code> / <code>'right'</code> / <code>'top'</code> / <code>'bottom'</code>。</p>\n","default":"'bottom'"},"textFill":{"type":["string"],"description":"<p>Fill color of text. If it's not set, it will use in the order of icon's fill color, stroke color, and <code>'#000'</code>.</p>\n","default":"'#000'"},"textAlign":{"type":["string"],"description":"<p>Text align: <code>'left'</code> / <code>'center'</code> / <code>'right'</code>。</p>\n","default":"'center'"},"textBackgroundColor":{"type":["string"],"description":"<p>Text background color.</p>\n"},"textBorderRadius":{"type":["number"],"description":"<p>Border radius of text area.</p>\n"},"textPadding":{"type":["number"],"description":"<p>Padding of text area.</p>\n"}}}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between toolbox component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between toolbox component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between toolbox component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between toolbox component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>Width of toolbox component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of toolbox component. Adaptive by default.</p>\n","default":"'auto'"},"tooltip":{"type":["Object"],"description":"<p>Tooltip configuration for toolbox tooltip, which is similar to <a href=\"#tooltip\">tooltip</a>. It is not shown by default. If you wish to set special style for toolbox icon label (especially when using CSS to control text style), you may set as the following example:</p>\n<pre><code class=\"lang-js\">option = {\n tooltip: {\n show: true // include tooltip component for the feature\n },\n toolbox: {\n show: true,\n showTitle: false, // hide the default text so they don't overlap each other\n feature: {\n saveAsImage: {\n show: true,\n title: 'Save As Image'\n },\n dataView: {\n show: true,\n title: 'Data View'\n },\n },\n tooltip: { // same as option.tooltip\n show: true,\n formatter: function (param) {\n return return '<div>' + param.title + '</div>'; // user-defined DOM structure\n },\n backgroundColor: '#222',\n textStyle: {\n fontSize: 12,\n },\n extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // user-defined CSS styles\n }\n },\n ...\n}\n</code></pre>\n"}}},"brush":{"type":["Object"],"description":"<p><code>brush</code> is an area-selecting component, with which user can select part of data from a chart to display in detail, or doing calculations with them.</p>\n<p><br></p>\n<hr>\n<p><strong>Brush type and triggering button</strong></p>\n<p>Currently, supported <code>brush</code> types include: <code>scatter</code>, <code>bar</code>, <code>candlestick</code>. (Note that <code>parallel</code> contains brush function by itself, which is not provided by brush component.)</p>\n<p>Click the button in <code>toolbox</code> to enable operations like <em>area selecting</em>, or <em>canceling selecting</em>.</p>\n<p><br>\nExample of <code>horizontal brush</code>: (Click the button in <code>toolbox</code> to enable brushing.)</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=candlestick-brush&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><br>\nExample of <code>brush</code> in <code>bar</code> charts:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-brush&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p>Button for <code>brush</code> can be assigned in <a href=\"#toolbox.feature.brush.type\"><code>toolbox</code></a> or <a href=\"#brush.toolbox\"><code>brush</code> configuration</a>.</p>\n<p>The following types of brushes are supported: <code>rect</code>, <code>polygon</code>, <code>lineX</code>, <code>lineY</code>. See <a href=\"#brush.toolbox\">brush.toolbox</a> for more information.</p>\n<p><code>keep</code> button can be used to toggle single or multiple selection.</p>\n<ul>\n<li>Only one select box is available in single selection mode, and the select-box can be removed by clicking on the blank area.</li>\n<li>Multiple select boxes are available in multiple selection mode, and the select-boxes cannot be removed by click on the blank area. Instead, you need to click the <em>clear</em> button.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Relationship between brush-selecting and coordinates</strong></p>\n<p><code>brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code>roam</code> and <code>dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code>geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code>'all'</code>: for all axes;</li>\n<li><code>number</code>: like <code>0</code>, for a particular coordinate with that index;</li>\n<li><code>Array</code>: like <code>[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code>'none'</code>, or <code>null</code>, or <code>undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n geo: {\n ...\n },\n brush: {\n geoIndex: 'all', // brush selecting is enabled only in all geo charts above\n ...\n }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n grid: [\n {...}, // grid 0\n {...} // grid 1\n ],\n xAxis: [\n {gridIndex: 1, ...}, // xAxis 0 for grid 1\n {gridIndex: 0, ...} // xAxis 1 for grid 0\n ],\n yAxis: [\n {gridIndex: 1, ...}, // yAxis 0 for grid 1\n {gridIndex: 0, ...} // yAxis 1 for grid 0\n ],\n brush: {\n xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n ...\n }\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Control select-box with API</strong></p>\n<p><code>dispatchAction</code> can be used to render select-box programatically. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n type: 'brush',\n areas: [\n {\n geoIndex: 0,\n // Assign select-box type\n brushType: 'polygon',\n // Assign select-box shape\n coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]]\n }\n ]\n});\n</code></pre>\n<p>Please refer to <a href=\"api.html#action.brush\" target=\"_blank\">action.brush</a> for more information.</p>\n<p><br></p>\n<hr>\n<p><strong>brushLink</strong></p>\n<p>Links interaction between selected items in different series.</p>\n<p>Following is an example of enabling selected effect for <code>scatter</code> and <code>parallel</code> charts once a scatter chart is selected.</p>\n<p><code>brushLink</code> is an array of <code>seriesIndex</code>es, which assignes the series that can be interacted. For example, it can be:</p>\n<ul>\n<li><code>[3, 4, 5]</code> for interacting series with seriesIndex as <code>3</code>, <code>4</code>, or <code>5</code>;</li>\n<li><code>'all'</code> for interacting all series;</li>\n<li><code>'none'</code>, or <code>null</code>, or <code>undefined</code> for disabling <code>brushLink</code>.</li>\n</ul>\n<p><strong>Attention</strong></p>\n<p><code>brushLink</code> is a mapping of <code>dataIndex</code>. So <strong><code>data</code> of every series with <code>brushLink</code> should be guaranteed to correspond to the other</strong>.</p>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n brush: {\n brushLink: [0, 1]\n },\n series: [\n {\n type: 'bar'\n data: [232, 4434, 545, 654] // data has 4 items\n },\n {\n type: 'parallel',\n data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above\n }\n ]\n};\n</code></pre>\n<p>Please refer to <a href=\"#brush.brushLink\">brush.brushLink</a>.</p>\n<p><br></p>\n<hr>\n<p><strong>throttle / debounce</strong></p>\n<p>By default, <code>brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code>throttleType</code> values can be:</p>\n<ul>\n<li><code>'debounce'</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>;</li>\n<li><code>'fixRate'</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-map-brush&edit=1&reset=1\" target=\"_blank\">example</a>, <code>debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n<p><br></p>\n<hr>\n<p><strong>Visual configurations of selected and unselected items</strong></p>\n<p>Refer to <a href=\"#brush.inBrush\">brush.inBrush</a> and <a href=\"#brush.outOfBrush\">brush.outOfBrush</a>.</p>\n<p><br></p>\n<hr>\n<p>Here is the configuration in details.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"toolbox":{"type":["Array"],"description":"<p>Use the buttons in toolbox.</p>\n<p>Buttons in toolbox that is related to brush includes:</p>\n<ul>\n<li><code>'rect'</code>: for selection-box in rectangle shape;</li>\n<li><code>'polygon'</code>: for selection-box in polygon shape;</li>\n<li><code>'lineX'</code>: for horizontal selection-box;</li>\n<li><code>'lineY'</code>: for vertical selection-box;</li>\n<li><code>'keep'</code>: for setting mode between <code>single</code> and <code>multiple</code> selection, the former of which supports clearing selection on click, and the latter selecting multiple areas;</li>\n<li><code>'clear'</code>: for clearing all selections.</li>\n</ul>\n","default":"['rect', 'polygon', 'keep', 'clear']"},"brushLink":{"type":["Array","string"],"description":"<p>Links interaction between selected items in different series.</p>\n<p>Following is an example of enabling selected effect for <code>scatter</code> and <code>parallel</code> charts once a scatter chart is selected.</p>\n<p><code>brushLink</code> is an array of <code>seriesIndex</code>es, which assignes the series that can be interacted. For example, it can be:</p>\n<ul>\n<li><code>[3, 4, 5]</code> for interacting series with seriesIndex as <code>3</code>, <code>4</code>, or <code>5</code>;</li>\n<li><code>'all'</code> for interacting all series;</li>\n<li><code>'none'</code>, or <code>null</code>, or <code>undefined</code> for disabling <code>brushLink</code>.</li>\n</ul>\n<p><strong>Attention</strong></p>\n<p><code>brushLink</code> is a mapping of <code>dataIndex</code>. So <strong><code>data</code> of every series with <code>brushLink</code> should be guaranteed to correspond to the other</strong>.</p>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n brush: {\n brushLink: [0, 1]\n },\n series: [\n {\n type: 'bar'\n data: [232, 4434, 545, 654] // data has 4 items\n },\n {\n type: 'parallel',\n data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above\n }\n ]\n};\n</code></pre>\n","default":null},"seriesIndex":{"type":["Array","number","string"],"description":"<p>Assigns which of the series can use brush selecting, whose value can be:</p>\n<ul>\n<li><code>'all'</code>: all series;</li>\n<li><code>'Array'</code>: series index array;</li>\n<li><code>'number'</code>: certain series index.</li>\n</ul>\n","default":"'all'"},"geoIndex":{"type":["Array","number","string"],"description":"<p>Assigns which of the geo can use brush selecting.</p>\n<p><code>brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code>roam</code> and <code>dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code>geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code>'all'</code>: for all axes;</li>\n<li><code>number</code>: like <code>0</code>, for a particular coordinate with that index;</li>\n<li><code>Array</code>: like <code>[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code>'none'</code>, or <code>null</code>, or <code>undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n geo: {\n ...\n },\n brush: {\n geoIndex: 'all', // brush selecting is enabled only in all geo charts above\n ...\n }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n grid: [\n {...}, // grid 0\n {...} // grid 1\n ],\n xAxis: [\n {gridIndex: 1, ...}, // xAxis 0 for grid 1\n {gridIndex: 0, ...} // xAxis 1 for grid 0\n ],\n yAxis: [\n {gridIndex: 1, ...}, // yAxis 0 for grid 1\n {gridIndex: 0, ...} // yAxis 1 for grid 0\n ],\n brush: {\n xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n ...\n }\n};\n</code></pre>\n","default":null},"xAxisIndex":{"type":["Array","number","string"],"description":"<p>Assigns which of the xAxisIndex can use brush selecting.</p>\n<p><code>brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code>roam</code> and <code>dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code>geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code>'all'</code>: for all axes;</li>\n<li><code>number</code>: like <code>0</code>, for a particular coordinate with that index;</li>\n<li><code>Array</code>: like <code>[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code>'none'</code>, or <code>null</code>, or <code>undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n geo: {\n ...\n },\n brush: {\n geoIndex: 'all', // brush selecting is enabled only in all geo charts above\n ...\n }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n grid: [\n {...}, // grid 0\n {...} // grid 1\n ],\n xAxis: [\n {gridIndex: 1, ...}, // xAxis 0 for grid 1\n {gridIndex: 0, ...} // xAxis 1 for grid 0\n ],\n yAxis: [\n {gridIndex: 1, ...}, // yAxis 0 for grid 1\n {gridIndex: 0, ...} // yAxis 1 for grid 0\n ],\n brush: {\n xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n ...\n }\n};\n</code></pre>\n","default":null},"yAxisIndex":{"type":["Array","number","string"],"description":"<p>Assigns which of the yAxisIndex can use brush selecting.</p>\n<p><code>brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts's instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code>roam</code> and <code>dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code>geo</code> charts.</p>\n<p>By assigning <a href=\"#brush.geoIndex\">brush.geoIndex</a>, or <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a>, or <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code>'all'</code>: for all axes;</li>\n<li><code>number</code>: like <code>0</code>, for a particular coordinate with that index;</li>\n<li><code>Array</code>: like <code>[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code>'none'</code>, or <code>null</code>, or <code>undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n geo: {\n ...\n },\n brush: {\n geoIndex: 'all', // brush selecting is enabled only in all geo charts above\n ...\n }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class=\"lang-javascript\">option = {\n grid: [\n {...}, // grid 0\n {...} // grid 1\n ],\n xAxis: [\n {gridIndex: 1, ...}, // xAxis 0 for grid 1\n {gridIndex: 0, ...} // xAxis 1 for grid 0\n ],\n yAxis: [\n {gridIndex: 1, ...}, // yAxis 0 for grid 1\n {gridIndex: 0, ...} // yAxis 1 for grid 0\n ],\n brush: {\n xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n ...\n }\n};\n</code></pre>\n","default":null},"brushType":{"type":["string"],"description":"<p>Default type of brush.</p>\n<ul>\n<li><code>'rect'</code>: for selection-box in rectangle shape;</li>\n<li><code>'polygon'</code>: for selection-box in polygon shape;</li>\n<li><code>'lineX'</code>: for horizontal selection-box;</li>\n<li><code>'lineY'</code>: for vertical selection-box;</li>\n</ul>\n","default":"'rect'"},"brushMode":{"type":["string"],"description":"<p>Default brush mode, whose value can be:</p>\n<ul>\n<li><code>'single'</code>: for single selection;</li>\n<li><code>'multiple'</code>: for multiple selection.</li>\n</ul>\n","default":"'single'"},"transformable":{"type":["boolean"],"description":"<p>Determines whether a selected box can be changed in shape or translated.</p>\n","default":true},"brushStyle":{"type":["Object"],"description":"<p>Defailt brush style, whose value is:</p>\n<pre><code class=\"lang-javascript\">{\n borderWidth: 1,\n color: 'rgba(120,140,180,0.3)',\n borderColor: 'rgba(120,140,180,0.8)'\n},\n</code></pre>\n"},"throttleType":{"type":["string"],"description":"<p>By default, <code>brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code>throttleType</code> values can be:</p>\n<ul>\n<li><code>'debounce'</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>;</li>\n<li><code>'fixRate'</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-map-brush&edit=1&reset=1\" target=\"_blank\">example</a>, <code>debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n","default":"'fixRate'"},"throttleDelay":{"type":["number"],"description":"<p><code>0</code> for disabling throttle。</p>\n<p>By default, <code>brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href=\"#brush.throttleType\">brush.throttleType</a> and <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code>throttleType</code> values can be:</p>\n<ul>\n<li><code>'debounce'</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>;</li>\n<li><code>'fixRate'</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href=\"#brush.throttleDelay\">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-map-brush&edit=1&reset=1\" target=\"_blank\">example</a>, <code>debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n","default":0},"removeOnClick":{"type":["number"],"description":"<p>Defined whether <em>clearing all select-boxes on click</em> is enabled when <a href=\"#brush.brushMode\">brush.brushMode</a> is <code>'single'</code>.</p>\n","default":true},"inBrush":{"type":["Object"],"description":"<p>Defines visual effects of items in selection.</p>\n<p>Available visual effects include:</p>\n<ul>\n<li><code>symbol</code>: Type of symbol.</li>\n<li><code>symbolSize</code>: Symbol size.</li>\n<li><code>color</code>: Symbol color.</li>\n<li><code>colorAlpha</code>: Symbol alpha channel.</li>\n<li><code>opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code>colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p>In most cases, inBrush can be left unassigned, in which case default visual configuration is remained.</p>\n"},"outOfBrush":{"type":["Object"],"description":"<p>Defines visual effects of items out of selection.</p>\n<p>Available visual effects include:</p>\n<ul>\n<li><code>symbol</code>: Type of symbol.</li>\n<li><code>symbolSize</code>: Symbol size.</li>\n<li><code>color</code>: Symbol color.</li>\n<li><code>colorAlpha</code>: Symbol alpha channel.</li>\n<li><code>opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code>colorLightness</code>: Lightness in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorSaturation</code>: Saturation in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n<li><code>colorHue</code>: Hue in <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>.</li>\n</ul>\n<p><strong>Note:</strong> If <code>outOfBrush</code> is not assigned, <code>color</code> will be set to be <code>'#ddd'</code> by default. If the color is not desired, you can use:</p>\n<pre><code class=\"lang-javascript\">brush: {\n ...,\n outOfBrush: {\n colorAlpha: 0.1\n }\n}\n</code></pre>\n"},"z":{"type":["number"],"description":"<p>z-index of brush cover box. It can be adjust when incorrect overlap occurs.</p>\n","default":10000}}},"geo":{"type":["Object"],"description":"<p>Geographic coorinate system component.</p>\n<p>Geographic coorinate system component is used to draw maps, which also supports <a href=\"#series-scatter\">scatter series</a>, and <a href=\"#series-lines\">line series</a>.</p>\n<p>From <code>3.1.10</code>, geo component also supports mouse events, whose parameters are:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'geo',\n // geo component's index in option\n geoIndex: number,\n // name of clicking area, e.g., Shanghai\n name: string,\n // clicking region object as input, see geo.regions\n region: Object\n}\n</code></pre>\n<p><strong>Tip:</strong>\nThe region color can also be controlled by map series. See <a href=\"#series-map.geoIndex\">series-map.geoIndex</a>.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"show":{"type":["boolean"],"description":"<p>Whether to show the geo component.</p>\n","default":true},"map":{"type":["string"],"description":"<p>Map charts.</p>\n<p>Due to the increase of fineness of map, ECharts 3 doesn't include map data by default for package size consideration. You may find map files you need on <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">map download page</a> and then include and register them in ECharts.</p>\n<p>Two formats of map data are provided in ECharts, one of which can be included in <code><script></code> tag as JavaScript file, and the other of is in JSON format and should be loaded using AJAX. Map name and data will be loaded automatically once the JavaScript file is loaded, while in the JSON form, you have to assign name explicitly.</p>\n<p>Here are examples of these two types:</p>\n<p><strong> JavaScript importing example </strong></p>\n<pre><code class=\"lang-html\"><script src="echarts.js"></script>\n<script src="map/js/china.js"></script>\n<script>\nvar chart = echarts.init(document.getElmentById('main'));\nchart.setOption({\n series: [{\n type: 'map',\n map: 'china'\n }]\n});\n</script>\n</code></pre>\n<p><strong> JSON importing example </strong></p>\n<pre><code class=\"lang-js\">$.get('map/json/china.json', function (chinaJson) {\n echarts.registerMap('china', chinaJson);\n var chart = echarts.init(document.getElmentById('main'));\n chart.setOption({\n series: [{\n type: 'map',\n map: 'china'\n }]\n });\n});\n</code></pre>\n<p>ECharts uses <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> format as map outline. Besides the methods introduced above, you can also get <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> data through in other methods if you like and register it in ECharts. Reference to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a> for more information.</p>\n","default":"''"},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable mouse zooming and translating. <code>false</code> by default. If either zooming or translating is wanted, it can be set to <code>'scale'</code> or <code>'move'</code>. Otherwise, set it to be <code>true</code> to enable both.</p>\n","default":false},"center":{"type":["Array"],"description":"<p>Center of current view-port, in longitude and latitude.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">center: [115.97, 29.71]\n</code></pre>\n"},"aspectScale":{"type":["number"],"description":"<p>Used to scale aspect of geo.</p>\n<p>The final aspect is calculated by: <code>geoBoundingRect.width / geoBoundingRect.height * aspectScale</code>.</p>\n","default":0.75},"boundingCoords":{"type":["Array"],"description":"<p>Two dimension array. Define coord of left-top, right-bottom in layout box.</p>\n<pre><code class=\"lang-js\">// A complete world map\nmap: 'world',\nleft: 0, top: 0, right: 0, bottom: 0,\nboundingCoords: [\n // [lng, lat] of left-top corner\n [-180, 90],\n // [lng, lat] of right-bottom corner\n [180, -90]\n],\n</code></pre>\n","default":null},"zoom":{"type":["number"],"description":"<p>Zoom rate of current view-port.</p>\n","default":1},"scaleLimit":{"type":["Object"],"description":"<p>Limit of scaling, with <code>min</code> and <code>max</code>. <code>1</code> by default.</p>\n","properties":{"min":{"type":["number"],"description":"<p>Minimum scaling</p>\n"},"max":{"type":["number"],"description":"<p>Maximum scaling</p>\n"}}},"nameMap":{"type":["Object"],"description":"<p>Name mapping for customized areas. For example:</p>\n<pre><code class=\"lang-js\">{\n 'China' : '中国'\n}\n</code></pre>\n"},"selectedMode":{"type":["boolean","string"],"description":"<p>Selected mode decides whether multiple selecting is supported. By default, <code>false</code> is used for disabling selection. Its value can also be <code>'single'</code> for selecting single area, or <code>'multiple'</code> for selecting multiple areas.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of Map Area Border, <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Area filling color.</p>\n","default":"'#eee'","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Map area style in highlighted state.</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Area filling color.</p>\n","default":"'#eee'"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"layoutCenter":{"type":["Array"],"description":"<p><code>layoutCenter</code> and <code>layoutSize</code> provides layout strategy other than <code>left/right/top/bottom/width/height</code>.</p>\n<p>When using <code>left/right/top/bottom/width/height</code>, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, <code>layoutCenter</code> attribute can be used to define the center position of map, and <code>layoutSize</code> can be used to define the size of map. For example:</p>\n<pre><code class=\"lang-js\">layoutCenter: ['30%', '30%'],\n// If width-height ratio is larger than 1, then width is set to be 100.\n// Otherwise, height is set to be 100.\n// This makes sure that it will not exceed the area of 100x100\nlayoutSize: 100\n</code></pre>\n<p>After setting these two values, <code>left/right/top/bottom/width/height</code> becomes invalid.</p>\n","default":null},"layoutSize":{"type":["number","string"],"description":"<p>Size of map, see <code>layoutCenter</code> for more information. Percentage relative to screen width, and absolute pixel values are supported.</p>\n"},"regions":{"type":["Array"],"description":"<p>Configure style for specified regions.\nFor example:</p>\n<pre><code class=\"lang-js\">regions: [{\n name: 'Guangdong',\n itemStyle: {\n areaColor: 'red',\n color: 'red'\n }\n}]\n</code></pre>\n<p>The region color can also be controlled by map series. See <a href=\"#series-map.geoIndex\">series-map.geoIndex</a>.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of area in map, like <code>'Guangdong'</code>, or <code>'Zhejiang'</code>.</p>\n"},"selected":{"type":["boolean"],"description":"<p>Whether this area is selected.</p>\n","default":false},"itemStyle":{"type":["Object"],"description":"<p>Item style of this area.</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Area color in the map.</p>\n"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":"<p>Area color in the map.</p>\n"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false}}},"parallel":{"type":["Object"],"description":"<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n [1, 55, 9, 56, 0.46, 18, 6, 'good'],\n [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],\n [3, 56, 7, 63, 0.3, 14, 5, 'good'],\n [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],\n { // Data item can also be an Object, so that perticular settings of its line can be set here.\n value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']\n lineStyle: {...},\n }\n ...\n]\n</code></pre>\n<p>In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".</p>\n<p>Parallel coordinates are much used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/parallel-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<hr>\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class=\"lang-javascript\">option = {\n parallelAxis: [ // Definitions of axes.\n {dim: 0, name: schema[0].text}, // Each axis has a 'dim' attribute, representing dimension index in data.\n {dim: 1, name: schema[1].text},\n {dim: 2, name: schema[2].text},\n {dim: 3, name: schema[3].text},\n {dim: 4, name: schema[4].text},\n {dim: 5, name: schema[5].text},\n {dim: 6, name: schema[6].text},\n {dim: 7, name: schema[7].text,\n type: 'category', // Also supports category data.\n data: ['Excellent', 'good', 'light pollution', 'moderate pollution', 'heavy pollution', 'severe pollution']\n }\n ],\n parallel: { // Definition of a parallel coordinate system.\n left: '5%', // Location of parallel coordinate system.\n right: '13%',\n bottom: '10%',\n top: '20%',\n parallelAxisDefault: { // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n type: 'value',\n nameLocation: 'end',\n nameGap: 20\n }\n },\n series: [ // Here the three series sharing the same parallel coordinate system.\n {\n name: 'Beijing',\n type: 'parallel', // The type of this series is 'parallel'\n data: [\n [1, 55, 9, 56, 0.46, 18, 6, 'good'],\n [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],\n ...\n ]\n },\n {\n name: 'Shanghai',\n type: 'parallel',\n data: [\n [3, 56, 7, 63, 0.3, 14, 5, 'good'],\n [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],\n ...\n ]\n },\n {\n name: 'Guangzhou',\n type: 'parallel',\n data: [\n [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],\n [5, 42, 24, 44, 0.76, 40, 16, 'excellent'],\n ...\n ]\n }\n ]\n};\n</code></pre>\n<p>Three components are involved here: <a href=\"#parallel\">parallel</a>, <a href=\"#parallelAxis\">parallelAxis</a>, <a href=\"#series-parallel\">series-parallel</a></p>\n<ul>\n<li><p><a href=\"#parallel\">parallel</a></p>\n<p> This component is the coordinate system. One or more series (like "Beijing", "Shanghai", and "Guangzhou" in the above example) can share one coordinate system.</p>\n<p> Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p> Position setting is also carried out here.</p>\n</li>\n<li><p><a href=\"#parallelAxis\">parallelAxis</a></p>\n<p> This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p> <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href=\"#series-parallel\">series-parallel</a></p>\n<p> This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p> <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href=\"#series-parallel.lineStyle.width\">series-parallel.lineStyle.width</a> to be <code>0.5</code> (or less), which may improve performance significantly.</p>\n<p><br></p>\n<hr>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\" ></iframe>\n\n\n\n\n\n\n\n<p><br>\n<br></p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between parallel component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":80},"top":{"type":["string","number"],"description":"<p>Distance between parallel component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":60},"right":{"type":["string","number"],"description":"<p>Distance between parallel component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":80},"bottom":{"type":["string","number"],"description":"<p>Distance between parallel component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":60},"width":{"type":["string","number"],"description":"<p>Width of parallel component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of parallel component. Adaptive by default.</p>\n","default":"'auto'"},"layout":{"type":["string"],"description":"<p>Layout modes, whose optional values are:</p>\n<ul>\n<li><p><code>'horizontal'</code>: place each axis horizontally.</p>\n</li>\n<li><p><code>'vertical'</code>: place each axis vertically.</p>\n</li>\n</ul>\n","default":"'horizontal'"},"axisExpandable":{"type":["boolean"],"description":"<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\" ></iframe>\n\n\n\n\n<p>Whether to enable toggling axis on clicking.</p>\n","default":false},"axisExpandCenter":{"type":["number"],"description":"<p>Index of the axis which is used as the center of expanding initially. It doesn't have a default value, and needs to be assigned manually.</p>\n<p>Please refer to <a href=\"parallel.axisExpandable\" target=\"_blank\">parallel.axisExpandable</a> for more information.</p>\n","default":null},"axisExpandCount":{"type":["number"],"description":"<p>Defines how many axes are at expanding state initially. We'd suggest you assign this value manually according to dimensions.</p>\n<p>Please refer to <a href=\"parallel.axisExpandCenter\" target=\"_blank\">parallel.axisExpandCenter</a> and <a href=\"parallel.axisExpandable\" target=\"_blank\">parallel.axisExpandable</a>.</p>\n","default":0},"axisExpandWidth":{"type":["number"],"description":"<p>Distance between two axes when at expanding state, in pixels.</p>\n<p>Please refer to <a href=\"parallel.axisExpandable\" target=\"_blank\">parallel.axisExpandable</a> for more information.</p>\n","default":50},"axisExpandTriggerOn":{"type":["string"],"description":"<p>Optional values:</p>\n<ul>\n<li><code>'click'</code>: Trigger expanding when mouse clicking.</li>\n<li><code>'mousemove'</code>: Trigger expanding when mouse hovering.</li>\n</ul>\n","default":"'click'"},"parallelAxisDefault":{"type":["Object"],"description":"<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/parallel-all&edit=1&reset=1\" target=\"_blank\">See the sample</a>.</p>\n<p><br></p>\n","properties":{"type":{"type":["string"],"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>'value'</code>\n Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>'category'</code>\n Category axis, suitable for discrete category data. Data should only be set via <a href=\"#parallelAxis.data\">data</a> for this type.</p>\n</li>\n<li><p><code>'time'</code>\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code>'log'</code>\n Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"value"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code> or <code>'center'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>axis name font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code>boundaryGap</code> of category axis can be set to either <code>true</code> or <code>false</code>. Default value is set to be <code>true</code>, in which case <a href=\"#parallelAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#parallelAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code>boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: ['20%', '20%']\n</code></pre>\n"},"min":{"type":["number","string"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#parallelAxis.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code>true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#parallelAxis.type\">type</a> is 'time'), it can be set to be <code>3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#parallelAxis.type\">type</a> 'value' or 'time'.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#parallelAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#parallelAxis.type\">type</a>: 'time' axis. Logged value should be passed for <a href=\"#parallelAxis.type\">type</a>: 'log' axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#parallelAxis.type\">type</a>: 'log'.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code>true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n // Component type: xAxis, yAxis, radiusAxis, angleAxis\n // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n componentType: string,\n // Value on axis before being formatted.\n // Click on value label to trigger event.\n value: '',\n // Name of axis.\n // Click on laben name to trigger event.\n name: ''\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be <code>'none'</code> by default, meaning no arrow for either end. If it is set to be <code>'arrow'</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>['none', 'arrow']</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code>boundaryGap</code> is set to be <code>true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- Overwrite color -->\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n // Formatted to be month/day; display year only in the first label\n var date = new Date(value);\n var texts = [(date.getMonth() + 1), date.getDate()];\n if (idx === 0) {\n texts.unshift(date.getYear());\n }\n return texts.join('/');\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#parallelAxis.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is not specified, but <code>axis.data</code> is specified, the <a href=\"#parallelAxis.type\">type</a> is auto set as <code>'category'</code>.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is specified as <code>'category'</code>, but <code>axis.data</code> is not specified, <code>axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code>axis.data</code> provides then value range of the <code>'category'</code> axis. If it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n value: 'Monday',\n // Highlight Monday\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<p>{ target: partial-axis-interval }}\nInterval of , which is available in category axis. is set to be the same as <a href=\"#parallelAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":0}}}}}}}}}}}}}},"parallelAxis":{"type":["Object"],"description":"<p>This component is the coordinate axis for parallel coordinate.</p>\n<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n [1, 55, 9, 56, 0.46, 18, 6, 'good'],\n [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],\n [3, 56, 7, 63, 0.3, 14, 5, 'good'],\n [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],\n { // Data item can also be an Object, so that perticular settings of its line can be set here.\n value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']\n lineStyle: {...},\n }\n ...\n]\n</code></pre>\n<p>In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".</p>\n<p>Parallel coordinates are much used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/parallel-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<hr>\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class=\"lang-javascript\">option = {\n parallelAxis: [ // Definitions of axes.\n {dim: 0, name: schema[0].text}, // Each axis has a 'dim' attribute, representing dimension index in data.\n {dim: 1, name: schema[1].text},\n {dim: 2, name: schema[2].text},\n {dim: 3, name: schema[3].text},\n {dim: 4, name: schema[4].text},\n {dim: 5, name: schema[5].text},\n {dim: 6, name: schema[6].text},\n {dim: 7, name: schema[7].text,\n type: 'category', // Also supports category data.\n data: ['Excellent', 'good', 'light pollution', 'moderate pollution', 'heavy pollution', 'severe pollution']\n }\n ],\n parallel: { // Definition of a parallel coordinate system.\n left: '5%', // Location of parallel coordinate system.\n right: '13%',\n bottom: '10%',\n top: '20%',\n parallelAxisDefault: { // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n type: 'value',\n nameLocation: 'end',\n nameGap: 20\n }\n },\n series: [ // Here the three series sharing the same parallel coordinate system.\n {\n name: 'Beijing',\n type: 'parallel', // The type of this series is 'parallel'\n data: [\n [1, 55, 9, 56, 0.46, 18, 6, 'good'],\n [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],\n ...\n ]\n },\n {\n name: 'Shanghai',\n type: 'parallel',\n data: [\n [3, 56, 7, 63, 0.3, 14, 5, 'good'],\n [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],\n ...\n ]\n },\n {\n name: 'Guangzhou',\n type: 'parallel',\n data: [\n [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],\n [5, 42, 24, 44, 0.76, 40, 16, 'excellent'],\n ...\n ]\n }\n ]\n};\n</code></pre>\n<p>Three components are involved here: <a href=\"#parallel\">parallel</a>, <a href=\"#parallelAxis\">parallelAxis</a>, <a href=\"#series-parallel\">series-parallel</a></p>\n<ul>\n<li><p><a href=\"#parallel\">parallel</a></p>\n<p> This component is the coordinate system. One or more series (like "Beijing", "Shanghai", and "Guangzhou" in the above example) can share one coordinate system.</p>\n<p> Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p> Position setting is also carried out here.</p>\n</li>\n<li><p><a href=\"#parallelAxis\">parallelAxis</a></p>\n<p> This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p> <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href=\"#series-parallel\">series-parallel</a></p>\n<p> This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p> <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href=\"#series-parallel.lineStyle.width\">series-parallel.lineStyle.width</a> to be <code>0.5</code> (or less), which may improve performance significantly.</p>\n<p><br></p>\n<hr>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\" ></iframe>\n\n\n\n\n\n\n\n\n<p><br>\n<br></p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"dim":{"type":["number"],"description":"<p>Dimension index of coordinate axis.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n [1, 55, 9, 56, 0.46, 18, 6, 'good'],\n [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],\n [3, 56, 7, 63, 0.3, 14, 5, 'good'],\n [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],\n { // Data item can also be an Object, so that perticular settings of its line can be set here.\n value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']\n lineStyle: {...},\n }\n ...\n]\n</code></pre>\n<p>In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".</p>\n<p><code>dim</code> defines which dimension (which <em>row</em>) of data would map to this axis.</p>\n<p>Started from <code>0</code>. For example, if the <code>dim</code> of coordinate axis is <code>1</code>, it indicates that the second row of data would map to this axis.</p>\n"},"parallelIndex":{"type":["number"],"description":"<p>It is used to define which <em>coordinate</em> the <em>axis</em> should map to.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n parallel: [\n {...}, // the first parallel coordinate\n {...} // the second parallel coordinate\n ],\n parallelAxis: [\n {parallelIndex: 1, ...}, // the first coordinate axis, mapping to the second parallel coordinate\n {parallelIndex: 0, ...}, // the second coordinate axis, mapping to the first parallel coordinate\n {parallelIndex: 1, ...}, // the third coordinate axis, mapping to the second parallel coordinate\n {parallelIndex: 0, ...} // the fourth coordinate axis, mapping to the first parallel coordinate\n ],\n ...\n});\n</code></pre>\n<p>If there is only one parallel coordinate, you don't have to configure it, whose default value is <code>0</code>.</p>\n","default":0},"realtime":{"type":["boolean"],"description":"<p>Whether to refresh view when brush-selecting axis. If is set to be <code>false</code>, view is updated after brush-selecting action ends.</p>\n<p>When data amount is large, it is suggested to set to be <code>false</code> to avoid efficiency problems.</p>\n","default":true},"areaSelectStyle":{"type":["Object"],"description":"<p>Area selecting is available on axes. Here is some configurations.</p>\n<p><br></p>\n","properties":{"width":{"type":["number"],"description":"<p>Width of selecting box.</p>\n","default":20},"borderWidth":{"type":["number"],"description":"<p>Border width of the select box.</p>\n","default":1},"borderColor":{"type":["Color"],"description":"<p>Border color of the select box.</p>\n","default":"'rgba(160,197,232)'"},"color":{"type":["Color"],"description":"<p>Border fill color of the select box.</p>\n","default":"'rgba(160,197,232)'"},"opacity":{"type":["number"],"description":"<p>Opacity of the select box.</p>\n","default":0.3}}},"type":{"type":["string"],"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>'value'</code>\n Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>'category'</code>\n Category axis, suitable for discrete category data. Data should only be set via <a href=\"#parallelAxis.data\">data</a> for this type.</p>\n</li>\n<li><p><code>'time'</code>\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code>'log'</code>\n Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"value"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code> or <code>'center'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>axis name font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code>boundaryGap</code> of category axis can be set to either <code>true</code> or <code>false</code>. Default value is set to be <code>true</code>, in which case <a href=\"#parallelAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#parallelAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code>boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: ['20%', '20%']\n</code></pre>\n"},"min":{"type":["number","string"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#parallelAxis.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code>true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#parallelAxis.type\">type</a> is 'time'), it can be set to be <code>3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#parallelAxis.type\">type</a> 'value' or 'time'.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#parallelAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#parallelAxis.min\">min</a> and <a href=\"#parallelAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#parallelAxis.type\">type</a>: 'time' axis. Logged value should be passed for <a href=\"#parallelAxis.type\">type</a>: 'log' axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#parallelAxis.type\">type</a>: 'log'.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code>true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n // Component type: xAxis, yAxis, radiusAxis, angleAxis\n // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n componentType: string,\n // Value on axis before being formatted.\n // Click on value label to trigger event.\n value: '',\n // Name of axis.\n // Click on laben name to trigger event.\n name: ''\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be <code>'none'</code> by default, meaning no arrow for either end. If it is set to be <code>'arrow'</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>['none', 'arrow']</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code>boundaryGap</code> is set to be <code>true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- Overwrite color -->\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n // Formatted to be month/day; display year only in the first label\n var date = new Date(value);\n var texts = [(date.getMonth() + 1), date.getDate()];\n if (idx === 0) {\n texts.unshift(date.getYear());\n }\n return texts.join('/');\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#parallelAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#parallelAxis.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is not specified, but <code>axis.data</code> is specified, the <a href=\"#parallelAxis.type\">type</a> is auto set as <code>'category'</code>.</p>\n<p>If <a href=\"#parallelAxis.type\">type</a> is specified as <code>'category'</code>, but <code>axis.data</code> is not specified, <code>axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code>axis.data</code> provides then value range of the <code>'category'</code> axis. If it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n value: 'Monday',\n // Highlight Monday\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<p>{ target: partial-axis-interval }}\nInterval of , which is available in category axis. is set to be the same as <a href=\"#parallelAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":0}}}}}}}}}}}},"singleAxis":{"type":["Object"],"description":"<p>An axis with a single dimension. It can be used to display data in one dimension. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=scatter-single-axis&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between grid component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'5%'"},"top":{"type":["string","number"],"description":"<p>Distance between grid component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'5%'"},"right":{"type":["string","number"],"description":"<p>Distance between grid component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":"'5%'"},"bottom":{"type":["string","number"],"description":"<p>Distance between grid component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":"'5%'"},"width":{"type":["string","number"],"description":"<p>Width of grid component. Adaptive by default.</p>\n","default":"'auto'"},"height":{"type":["string","number"],"description":"<p>Height of grid component. Adaptive by default.</p>\n","default":"'auto'"},"orient":{"type":["string"],"description":"<p>Orientation of the axis. By default, it's <code>'horizontal'</code>. You can set it to be <code>'vertical'</code> to make a vertical axis.</p>\n","default":"'horizontal'"},"type":{"type":["string"],"description":"<p>Type of axis</p>\n<p>Option:</p>\n<ul>\n<li><p><code>'value'</code>\n Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code>'category'</code>\n Category axis, suitable for discrete category data. Data should only be set via <a href=\"#singleAxis.data\">data</a> for this type.</p>\n</li>\n<li><p><code>'time'</code>\n Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code>'log'</code>\n Log axis, suitable for log data.</p>\n</li>\n</ul>\n","default":"'value'"},"name":{"type":["string"],"description":"<p>Name of axis.</p>\n"},"nameLocation":{"type":["string"],"description":"<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code> or <code>'center'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'end'"},"nameTextStyle":{"type":["Object"],"description":"<p>Text style of axis name.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Color of axis name uses <a href=\"#singleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"fontStyle":{"type":["string"],"description":"<p>axis name font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>axis name font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>axis name font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>axis name font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"nameGap":{"type":["number"],"description":"<p>Gap between axis name and axis line.</p>\n","default":15},"nameRotate":{"type":["number"],"description":"<p>Rotation of axis name.</p>\n","default":null},"inverse":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n","default":false},"boundaryGap":{"type":["boolean","Array"],"description":"<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code>boundaryGap</code> of category axis can be set to either <code>true</code> or <code>false</code>. Default value is set to be <code>true</code>, in which case <a href=\"#singleAxis.axisTick\">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href=\"#singleAxis.axisTick\">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code>boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href=\"#singleAxis.min\">min</a> and <a href=\"#singleAxis.max\">max</a>.\n<strong>Example: </strong></p>\n<pre><code class=\"lang-js\">boundaryGap: ['20%', '20%']\n</code></pre>\n"},"min":{"type":["number","string"],"description":"<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code>'dataMin'</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"max":{"type":["number","string"],"description":"<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code>'dataMax'</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code>data: ['categoryA', 'categoryB', 'categoryC']</code>, and the ordinal <code>2</code> represents <code>'categoryC'</code>. Moreover, it can be set as negative number, like <code>-3</code>.</p>\n","default":null},"scale":{"type":["boolean"],"description":"<p>It is available only in numerical axis, i.e., <a href=\"#singleAxis.type\">type</a>: 'value'.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code>true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href=\"#singleAxis.min\">min</a> and <a href=\"#singleAxis.max\">max</a> are set.</p>\n","default":false},"splitNumber":{"type":["number"],"description":"<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n","default":5},"minInterval":{"type":["number"],"description":"<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href=\"#singleAxis.type\">type</a> is 'time'), it can be set to be <code>3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class=\"lang-js\">{\n maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href=\"#singleAxis.type\">type</a> 'value' or 'time'.</p>\n"},"interval":{"type":["number"],"description":"<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href=\"#singleAxis.splitNumber\">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href=\"#singleAxis.min\">min</a> and <a href=\"#singleAxis.max\">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, out automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href=\"#singleAxis.type\">type</a>: 'time' axis. Logged value should be passed for <a href=\"#singleAxis.type\">type</a>: 'log' axis.</p>\n"},"logBase":{"type":["number"],"description":"<p>Base of logarithm, which is valid only for numeric axes with <a href=\"#singleAxis.type\">type</a>: 'log'.</p>\n","default":10},"silent":{"type":["boolean"],"description":"<p>Set this to <code>true</code>, to prevent interaction with the axis.</p>\n","default":false},"triggerEvent":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class=\"lang-js\">{\n // Component type: xAxis, yAxis, radiusAxis, angleAxis\n // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n componentType: string,\n // Value on axis before being formatted.\n // Click on value label to trigger event.\n value: '',\n // Name of axis.\n // Click on laben name to trigger event.\n name: ''\n}\n</code></pre>\n","default":false},"axisLine":{"type":["Object"],"description":"<p>Settings related to axis line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis line from showing.</p>\n","default":true},"symbol":{"type":["string","Array"],"description":"<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It's set to be <code>'none'</code> by default, meaning no arrow for either end. If it is set to be <code>'arrow'</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code>['none', 'arrow']</code>.</p>\n","default":"'none'"},"symbolSize":{"type":["Array"],"description":"<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n","default":"[10, 15]"},"symbolOffset":{"type":["Array","number"],"description":"<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>line styleLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#333'"},"width":{"type":["number"],"description":"<p>line style line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>line style line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>Settings related to axis tick.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis tick from showing.</p>\n","default":true},"alignWithLabel":{"type":["boolean"],"description":"<p>Align axis tick with label, which is available only when <code>boundaryGap</code> is set to be <code>true</code> in category axis. See the following picture:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/axis-align-with-label.png\"></p>\n","default":false},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"length":{"type":["number"],"description":"<p>The length of the axis tick.</p>\n","default":5},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Color of axis label is set to be <a href=\"#singleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default.</p>\n"},"width":{"type":["number"],"description":"<p>axisTick line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>axisTick line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- Overwrite color -->\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Settings related to axis label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the axis label from appearing.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"inside":{"type":["boolean"],"description":"<p>Set this to <code>true</code> so the axis labels face the <code>inside</code> direction.</p>\n","default":false},"rotate":{"type":["number"],"description":"<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the axis label and the axis line.</p>\n","default":8},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n // Formatted to be month/day; display year only in the first label\n var date = new Date(value);\n var texts = [(date.getMonth() + 1), date.getDate()];\n if (idx === 0) {\n texts.unshift(date.getYear());\n }\n return texts.join('/');\n}\n</code></pre>\n","default":null},"showMinLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the min tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n","default":null},"showMaxLabel":{"type":["boolean"],"description":"<p>Whether to show the label of the max tick. Optional values: <code>true</code>, <code>false</code>, <code>null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n","default":null},"color":{"type":["Color","Function"],"description":"<p>Color of axis label is set to be <a href=\"#singleAxis.axisLine.lineStyle.color\">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class=\"lang-js\">(val: string) => Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class=\"lang-js\">textStyle: {\n color: function (value, index) {\n return value >= 0 ? 'green' : 'red';\n }\n}\n</code></pre>\n"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- Overwrite color -->\n","default":0}}}}}}},"splitLine":{"type":["Object"],"description":"<p>SplitLine of axis in <a href=\"#grid\">grid</a> area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the splitLine from showing.\n<code>value</code> type axes are shown by default, while <code>category</code> type axes are hidden.</p>\n","default":true},"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Array","string"],"description":"<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n lineStyle: {\n // Dark and light colors will be used in turns\n color: ['#aaa', '#ddd']\n }\n}\n</code></pre>","default":"['#ccc']"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- overwrite color -->\n"}}}}},"splitArea":{"type":["Object"],"description":"<p>Split area of axis in <a href=\"#grid\">grid</a> area, not shown by default.</p>\n","properties":{"interval":{"type":["number","Function"],"description":"","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Set this to <code>true</code> to show the splitArea.</p>\n","default":false},"areaStyle":{"type":["Object"],"description":"<p>Split area style.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n","default":"['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Category data, available in <a href=\"#singleAxis.type\">type</a>: 'category' axis.</p>\n<p>If <a href=\"#singleAxis.type\">type</a> is not specified, but <code>axis.data</code> is specified, the <a href=\"#singleAxis.type\">type</a> is auto set as <code>'category'</code>.</p>\n<p>If <a href=\"#singleAxis.type\">type</a> is specified as <code>'category'</code>, but <code>axis.data</code> is not specified, <code>axis.data</code> will be auto collected from <a href=\"#series.data\">series.data</a>. It brings convenience, but we should notice that <code>axis.data</code> provides then value range of the <code>'category'</code> axis. If it is auto collected from <a href=\"#series.data\">series.data</a>, Only the values appearing in <a href=\"#series.data\">series.data</a> can be collected. For example, if <a href=\"#series.data\">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Name list of all categories\ndata: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n value: 'Monday',\n // Highlight Monday\n textStyle: {\n fontSize: 20,\n color: 'red'\n }\n}, 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["string"],"description":"<p>Name of a category.</p>\n"},"textStyle":{"type":["Object"],"description":"<p>Text style of the category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}},"axisPointer":{"type":["Object"],"description":"<p>axisPointer settings on the axis.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>axisPointer will not be displayed by default. But if <a href=\"#tooltip.trigger\">tooltip.trigger</a> is set as <code>'axis'</code> or <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n","default":false},"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'line'</code> line indicator.</p>\n</li>\n<li><p><code>'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code>'none'</code> no indicator displayed.</p>\n</li>\n</ul>\n","default":"'line'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>'2'</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: 'some text {value} some text</code>, where <code>{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code>function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code>{Object}</code> params: Including fields as follows:</p>\n<p><code>{Object}</code> params.value: current value of this axis. If <code>axis.type</code> is <code>'category'</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>'time'</code>, it is a timestamp.</p>\n<p><code>{Array.<Object>}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code>{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code>'x'</code>, <code>'y'</code>, and in polar it will be <code>'radius'</code>, <code>'angle'</code>.</p>\n<p><code>{number}</code> params.axisIndex: The index of the axis, for example, <code>0</code>,<code>1</code>, <code>2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // The current value of axisPointer\n axisValueLabel: 'text of value'\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // If axis.type is 'time'\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'line'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'shadow'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"triggerTooltip":{"type":["boolean"],"description":"<p>Whether to trigger tooltip.</p>\n","default":true},"value":{"type":["number"],"description":"<p>current value. When using <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a>, <code>value</code> can be set to define the initail position of axisPointer.</p>\n","default":null},"status":{"type":["boolean"],"description":"<p>Current status, can be <code>'show'</code> 和 <code>'hide'</code>.</p>\n"},"handle":{"type":["Object"],"description":"<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set to <code>true</code> to use handle.</p>\n","default":false},"icon":{"type":["*"],"description":"<p>The icon of the handle.</p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/axisPointer-handle-image&edit=1&reset=1\" target=\"_blank\">example of using image</a></p>\n"},"size":{"type":["number","Array"],"description":"<p>The size of the handle, which can be set as a single value or an array (<code>[width, height]</code>).</p>\n","default":45},"margin":{"type":["number"],"description":"<p>Distance from handle center to axis.</p>\n","default":50},"color":{"type":["string"],"description":"<p>The color of the handle.</p>\n","default":"'#333'"},"throttle":{"type":["number"],"description":"<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n","default":40},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n<p>{ target: partial-axis-interval }}\nInterval of , which is available in category axis. is set to be the same as <a href=\"#singleAxis.axisLabel.interval\">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class=\"lang-js\">(index:number, value: string) => boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n","default":0}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in the coordinate system component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href=\"#tooltip\">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href=\"#grid.tooltip\">grid.tooltip</a>, <a href=\"#polar.tooltip\">polar.tooltip</a>, <a href=\"#single.tooltip\">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href=\"#series.tooltip\">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code>series.data</code>: <a href=\"#series.data.tooltip\">series.data.tooltip</a></p>\n</li>\n</ul>\n<hr>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the tooltip component, including tooltip floating layer and <a href=\"#tooltip.axisPointer\">axisPointer</a>.</p>\n","default":true},"trigger":{"type":["string"],"description":"<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'item'</code></p>\n<p> Triggered by data item, which is mainly used for charts that don't have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code>'axis'</code></p>\n<p> Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href=\"#grid\">grid</a> or <a href=\"#polar\">polar</a>. Also, you may assign axis with <a href=\"#tooltip.axisPointer.axis\">axisPointer.axis</a>.</p>\n</li>\n<li><p><code>'none'</code></p>\n<p> Trigger nothing.</p>\n</li>\n</ul>\n","default":"'item'"},"axisPointer":{"type":["Object"],"description":"<p>Configuration item for axis indicator.</p>\n<p><code>tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a> or <a href=\"#angleAxis.axisPointer\">angleAxis.axisPointer</a>). More detailed features can be configured on <code>someAxis.axisPointer</code>. But in common cases, using <code>tooltip.axisPinter</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code>tooltip.axisPointer</code> has lower priority than that of <code>someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code>axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1\" width=\"600\" height=\"450\" ></iframe>\n\n\n<p>In the demo above, <a href=\"#axisPointer.link\">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code>axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-tooltip-touch&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-y-axis&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=multiple-x-axis&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href=\"#xAxis.axisPointer\">xAxis.axisPointer</a>), or configured in <code>tooltip</code> (for example <a href=\"#tooltip.axisPointer\">tooltip.axisPointer</a>).</p>\n<p>But these configurations can only be configured in global axisPointer:\n<a href=\"#axisPointer.triggerOn\">axisPointer.triggerOn</a>, <a href=\"#axisPointer.link\">axisPointer.link</a>。</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href=\"#grid\">cartesian (grid)</a> and <a href=\"#single\">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code>someAxis.axisPointer.show</code> (like <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.show</a>) as <code>true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.trigger\">tooltip.trigger</a> as <code>'axis'</code>, or set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code>'cross'</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code>axis.axisPointer</code> will override <code>tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code>someAxis.axisPointer.label.show</code> (for example <a href=\"#xAxis.axisPointer.show\">xAxis.axisPointer.label.show</a>) as <code>true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> as <code>'cross'</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code>someAxis.axisPointer.handle.show</code> (for example <a href=\"#xAxis.axisPointer.handle.show\">xAxis.axisPointer.handle.show</a> as <code>true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href=\"#tooltip.triggerOn\">tooltip.triggerOn</a> as <code>'none'</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href=\"#tooltip.alwaysShowContent\">tooltip.alwaysShowContent</a> as <code>true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href=\"#xAxis.axisPointer.snap\">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n","properties":{"type":{"type":["string"],"description":"<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>'line'</code> line indicator.</p>\n</li>\n<li><p><code>'shadow'</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code>'none'</code> no indicator displayed.</p>\n</li>\n<li><p><code>'cross'</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n","default":"'line'"},"axis":{"type":["string"],"description":"<p>The coordinate axis, which could be <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, or <code>'angle'</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n","default":"'auto'"},"snap":{"type":["boolean"],"description":"<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n"},"z":{"type":["number"],"description":"<p>z value, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n"},"label":{"type":["Object"],"description":"<p>label of axisPointer</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label. Label will not show by default. But if <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> is set as <code>'cross'</code>, label will be displayed automatically.</p>\n","default":false},"precision":{"type":["number","string"],"description":"<p>The precision of value in label. It is auto determined by default. You can also set it as <code>'2'</code>, which indicates that two decimal fractions are reserved.</p>\n","default":"'auto'"},"formatter":{"type":["string","Function"],"description":"<p>The formatter of label.</p>\n<p>If set as <code>string</code>, for example it can be: <code>formatter: 'some text {value} some text</code>, where <code>{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code>function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code>{Object}</code> params: Including fields as follows:</p>\n<p><code>{Object}</code> params.value: current value of this axis. If <code>axis.type</code> is <code>'category'</code>, it is one of the value in <code>axis.data</code>. If <code>axis.type</code> is <code>'time'</code>, it is a timestamp.</p>\n<p><code>{Array.<Object>}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code>{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code>'x'</code>, <code>'y'</code>, and in polar it will be <code>'radius'</code>, <code>'angle'</code>.</p>\n<p><code>{number}</code> params.axisIndex: The index of the axis, for example, <code>0</code>,<code>1</code>, <code>2</code>, ...</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>Each item also includes axis infomation:</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // The current value of axisPointer\n axisValueLabel: 'text of value'\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // If axis.type is 'time'\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n","default":null},"margin":{"type":["boolean"],"description":"<p>Distance between label and axis.</p>\n","default":3},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"padding":{"type":["string","Array"],"description":"<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":"[5, 7, 5, 7]"},"backgroundColor":{"type":["string"],"description":"<p>Background color of label, the same as <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> by default.</p>\n","default":"'auto'"},"borderColor":{"type":["string"],"description":"<p>Border color of label.</p>\n","default":null},"borderWidth":{"type":["string"],"description":"<p>Border width of label.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"#aaa"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"lineStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'line'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"shadowStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'shadow'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'rgba(150,150,150,0.3)"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"crossStyle":{"type":["Object"],"description":"<p>It is valid when <a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> is <code>'cross'</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#555"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"dashed"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":200},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"exponentialOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"position":{"type":["string","Array"],"description":"<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},"timeline":{"type":["Object"],"description":"<p><code>timeline</code> component, which provides functions like switching and playing between multiple ECharts <code>options</code>.</p>\n<p>Here is an example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/mix-timeline-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>Different from other components, <code>timeline</code> component requires multiple options. If the traditional way of ECharts option is called <em>atomic option</em>, then, the option used along with timeline should be call a <em>compound option</em> composed with multiple atomic options. For example:</p>\n<pre><code class=\"lang-javascript\">// In the following example, baseOption is an *atomic option*, so as each item in options array.\n// Each of the atomic option follows configuration introduced in this document.\nmyChart.setOption(\n {\n baseOption: {\n timeline: {\n ...,\n data: ['2002-01-01', '2003-01-01', '2004-01-01']\n },\n title: {\n subtext: ' Data is from National Bureau of Statistics '\n },\n grid: {...},\n xAxis: [...],\n yAxis: [...],\n series: [\n { // other configurations of series 1\n type: 'bar',\n ...\n },\n { // other configurations of series 2\n type: 'line',\n ...\n },\n { // other configurations of series 3\n type: 'pie',\n ...\n }\n ]\n },\n options: [\n { // it is an option corresponding to '2002-01-01'\n title: {\n text: 'the statistics of the year 2002'\n },\n series: [\n {data: []}, // the data of series 1\n {data: []}, // the data of series 2\n {data: []} // the data of series 3\n ]\n },\n { // it is an option corresponding to '2003-01-01'\n title: {\n text: 'the statistics of the year 2003'\n },\n series: [\n {data: []},\n {data: []},\n {data: []}\n ]\n },\n { // it is an option corresponding to '2004-01-01'\n title: {\n text: 'the statistics of the year 2004'\n },\n series: [\n {data: []},\n {data: []},\n {data: []}\n ]\n }\n ]\n }\n);\n</code></pre>\n<p>In the above example, each item in <code>timeline.data</code> corresponds to each <code>option</code> of <code>options</code> array.</p>\n<p><br>\n<strong>Attention and Best Practice: </strong></p>\n<ul>\n<li><p>Shared configuration items are recommended to be set in <code>baseOption</code>. When switching in <code>timeline</code>, <code>option</code> in corresponding <code>options</code> array will be merged with <code>baseOption</code> to form the final <code>option</code>.</p>\n</li>\n<li><p>In <code>options</code> array, if an attribute is configured in one of the options, then, it should also be configured in other options. Otherwise, this attribute will be ignored.</p>\n</li>\n<li><p><code>options</code> in <em>compound option</em> doesn't support merge.</p>\n<p> That is to say, when calling <code>chart.setOption(rawOption)</code> after the first time, if <code>rawOption</code> is a <em>compound option</em> (meaning that it contains an array of <code>options</code>), then the new <code>rawOption.options</code> will replace the old one, instead of merging with it. Of course, <code>rawOption.baseOption</code> will be merged with that of old option normally.</p>\n</li>\n</ul>\n<p><br>\n<strong>Compatibility with ECharts 2: </strong></p>\n<ul>\n<li><p>ECharts3 doesn't support <code>timeline.notMerge</code> parameter any more, which implies <em>notMerge mode</em> is no longer supported. If you need this function, you may manage the option in your own program before passing to <code>setOption(option, true)</code>.</p>\n</li>\n<li><p>Comparing ECharts 3 with ECharts 2, the definition location of timeline attributes are different. The one in ECharts 3 is moved to <code>baseOption</code> and is regarded as a seperate component, which is also compatible with the timeline definition location of ECharts 2. But it is not recommended to do so.</p>\n</li>\n</ul>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the <code>timeline</code> component. It would not show with a setting of <code>false</code>, but its functions still remain.</p>\n","default":true},"type":{"type":["string"],"description":"<p>This attribute has only one valid value as <code>slider</code> by now. You don't have to change it.</p>\n","default":"'slider'"},"axisType":{"type":["string"],"description":"<p>Type of axis, whose values may be:</p>\n<ul>\n<li><code>'value'</code>\n Numeric axis, which is suitable for continuous data.</li>\n<li><code>'category'</code>\n Category axis, which is suitable for category data.</li>\n<li><code>'time'</code>\n Time axis, which is suitable for continuous time data. Compared with value axis, time axis is equipped with time formatting function and has a different method when calculating axis ticks. For example, for time axis, axis ticks may vary in choosing unit as month, week, date, or hour based on the range of data.</li>\n</ul>\n","default":"'time'"},"currentIndex":{"type":["number"],"description":"<p>Indicates which is the currently selected item. For instance, if <code>currentIndex</code> is <code>0</code>, it indicates that the currently selected item is <code>timeline.data[0]</code> (namely, using <code>options[0]</code>).</p>\n","default":0},"autoPlay":{"type":["boolean"],"description":"<p>Whether to play automatically.</p>\n","default":false},"rewind":{"type":["boolean"],"description":"<p>Whether supports playing reversely.</p>\n","default":false},"loop":{"type":["boolean"],"description":"<p>Whether to loop playing.</p>\n","default":true},"playInterval":{"type":["number"],"description":"<p>Indicates play speed (gap time between two state), whose unit is millisecond.</p>\n","default":2000},"realtime":{"type":["boolean"],"description":"<p>Whether the view updates in real time during dragging the control dot.</p>\n","default":true},"controlPosition":{"type":["string"],"description":"<p>Position of the play button, whose valid values are <code>'left'</code> and <code>'right'</code>.</p>\n","default":"'left'"},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between timeline component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between timeline component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between timeline component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between timeline component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"padding":{"type":["number","Array"],"description":"<p>timeline space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"orient":{"type":["string"],"description":"<p>Orientation of the component, whose valid values are:</p>\n<ul>\n<li><code>'vertical'</code>: vertical layout.</li>\n<li><code>'horizontal'</code>: horizontal layout.</li>\n</ul>\n","default":"'horizontal'"},"inverse":{"type":["boolean"],"description":"<ul>\n<li>Whether to put the <code>timeline</code> component reversely, which makes the elements in the front to be at the end.</li>\n</ul>\n","default":false},"symbol":{"type":["string"],"description":"<p>Symbol of timeline.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>","default":"'emptyCircle'"},"symbolSize":{"type":["number","Array"],"description":"<p>timeline symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n","default":10},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of timeline symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of timeline symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the axis. It can be set to be <code>false</code> to hide the axis line to make a different style.</p>\n","default":true},"color":{"type":["Color"],"description":"<p>timeline Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#304654'"},"width":{"type":["number"],"description":"<p>timeline line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p>timeline line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>Label axis, <code>emphasis</code> is the highlighted style of text. For instance, text style in <code>emphasis</code> would be used when mouse hovers or legend connects.</p>\n","properties":{"position":{"type":["string","number"],"description":"<p>Configurations:</p>\n<ul>\n<li><p><code>'auto'</code>:\n Automatic layout.</p>\n</li>\n<li><p><code>'left'</code>:\n Put it along the left margin.\n It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>'horizontal'</code> .</p>\n</li>\n<li><p><code>'right'</code>:\n Put it along the right margin.\n It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>'horizontal'</code>.</p>\n</li>\n<li><p><code>'top'</code>:\n Put it along the margin of the top.\n It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>'vertical'</code>.</p>\n</li>\n<li><p><code>'bottom'</code>:\n Put it along the margin of the bottom.\n It is valid when <a href=\"#timeline.orient\">timline.orient</a> is set as <code>'vertical'</code>.</p>\n</li>\n<li><p><code>number</code>:\n When it is assigned to be a a number value, it indicates the distance between <code>label</code> and axis. If it is set to be <code>0</code> , <code>label</code> would be at the same position with axis. Negative value is valid for the other side of the axis.</p>\n</li>\n</ul>\n","default":"'auto'"},"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":true},"interval":{"type":["string","number"],"description":"<p>Interval of <code>label</code>. When it is assigned with a numerical value, such as <code>2</code>, a label would show every 2 items.</p>\n","default":"'auto'"},"rotate":{"type":["prefix"],"description":"<p>Rotation angle of <code>label</code>, in which positive values refer to counter clockwise rotation.</p>\n","default":0},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n // Formatted to be month/day; display year only in the first label\n var date = new Date(value);\n var texts = [(date.getMonth() + 1), date.getDate()];\n if (idx === 0) {\n texts.unshift(date.getYear());\n }\n return texts.join('/');\n}\n</code></pre>\n","default":null},"color":{"type":["Color"],"description":"<p>timeline.lable.normal text color.</p>\n","default":"'#304654'"},"fontStyle":{"type":["string"],"description":"<p>timeline.lable.normal font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>timeline.lable.normal font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>timeline.lable.normal font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>timeline.lable.normal font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":true},"interval":{"type":["string","number"],"description":"<p>Interval of <code>label</code>. When it is assigned with a numerical value, such as <code>2</code>, a label would show every 2 items.</p>\n","default":"'auto'"},"rotate":{"type":["prefix"],"description":"<p>Rotation angle of <code>label</code>, in which positive values refer to counter clockwise rotation.</p>\n","default":0},"formatter":{"type":["string","Function"],"description":"<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">// Use string template; template variable is the default label of axis {value}\nformatter: '{value} kg'\n\n// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n // Formatted to be month/day; display year only in the first label\n var date = new Date(value);\n var texts = [(date.getMonth() + 1), date.getDate()];\n if (idx === 0) {\n texts.unshift(date.getYear());\n }\n return texts.join('/');\n}\n</code></pre>\n","default":null},"color":{"type":["Color"],"description":"<p>timeline.lable.emphasis text color.</p>\n","default":"'#c23531'"},"fontStyle":{"type":["string"],"description":"<p>timeline.lable.emphasis font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p>timeline.lable.emphasis font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p>timeline.lable.emphasis font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p>timeline.lable.emphasis font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of timeline , <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>timeline color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#304654'"},"borderColor":{"type":["Color"],"description":"<p>timeline border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>timeline border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>timeline color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#c23531'"},"borderColor":{"type":["Color"],"description":"<p>timeline border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>timeline border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"checkpointStyle":{"type":["Object"],"description":"<p>Style of the selected item (<code>checkpoint</code>).</p>\n","properties":{"symbol":{"type":["string"],"description":"<p>Symbol of timeline.checkpointStyle .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>timeline.checkpointStyle symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n","default":13},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of timeline.checkpointStyle symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of timeline.checkpointStyle symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"color":{"type":["Color"],"description":"<p>Color of <code>checkpoint</code> in <code>timeline</code> component.</p>\n","default":"'#c23531'"},"borderWidth":{"type":["number"],"description":"<p>The border-width of <code>checkpoint</code> in <code>timeline</code> component.</p>\n","default":5},"borderColor":{"type":["Color"],"description":"<p>The border-color of <code>checkpoint</code> in <code>timeline</code> component.</p>\n","default":"'rgba(194,53,49, 0.5)'"},"animation":{"type":["boolean"],"description":"<p>In <code>timeline</code> component, whether there is animation in <code>checkpoint</code> moving during the process of <code>timeline</code> playing and switching.</p>\n","default":true},"animationDuration":{"type":["number"],"description":"<p>The animation duration of <code>checkpoint</code> in <code>timeline</code> component.</p>\n","default":300},"animationEasing":{"type":["string"],"description":"<p>The easing effect of animation of <code>checkpoint</code> in <code>timeline</code> component. Refers to <a href=\"https://echarts.apache.org/examples/zh/view.html?c=line-easing\" target=\"_blank\">easing sample</a> for different easing effects.</p>\n","default":"'quinticInOut'"}}},"controlStyle":{"type":["Object"],"description":"<p>The style of <em>control button</em>, which includes: <em>play button</em>, <em>previous button</em>, and <em>next button</em>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show control button. <code>false</code> for hide all.</p>\n","default":true},"showPlayBtn":{"type":["boolean"],"description":"<p>Whether to show play button.</p>\n","default":true},"showPrevBtn":{"type":["boolean"],"description":"<p>Whether to show previous button.</p>\n","default":true},"showNextBtn":{"type":["boolean"],"description":"<p>Whether to show next button.</p>\n","default":true},"itemSize":{"type":["number"],"description":"<p>Size of <em>control button</em>, in pixels (px).</p>\n","default":22},"itemGap":{"type":["number"],"description":"<p>Interval between <em>control button</em>, in pixels (px).</p>\n","default":12},"position":{"type":["string"],"description":"<p>the location of <em>control button</em>.</p>\n<ul>\n<li><p>When <a href=\"#timeline.orient\">timeline.orient</a> is set to be <code>'horizontal'</code>, <code>'left'</code> and <code>'right'</code>are valid.</p>\n</li>\n<li><p>When <a href=\"#timeline.orient\">timeline.orient</a> is set to be <code>'vertical'</code>, <code>'top'</code> and <code>'bottom'</code>are valid.</p>\n</li>\n</ul>\n","default":"'left'"},"playIcon":{"type":["string"],"description":"<p>Icon of <em>play status</em> for <em>play button</em>.</p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"stopIcon":{"type":["string"],"description":"<p>Icon of <em>stop status</em> for <em>play button</em>.</p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"prevIcon":{"type":["string"],"description":"<p>Icon of <em>previous button</em>.</p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"nextIcon":{"type":["string"],"description":"<p>Icon of <em>next button</em>.</p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"color":{"type":["Color"],"description":"<p>Button color.</p>\n","default":"'#304654'"},"borderColor":{"type":["Color"],"description":"<p>Color of button border.</p>\n","default":"'#304654'"},"borderWidth":{"type":["number"],"description":"<p>Border width of button.</p>\n","default":1},"emphasis":{"type":["Object"],"description":"<p>Button style in <em>highlighted state</em> (when it's hovered by mouse).</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Button color.</p>\n","default":"'#c23531'"},"borderColor":{"type":["Color"],"description":"<p>Color of button border.</p>\n","default":"'#c23531'"},"borderWidth":{"type":["number"],"description":"<p>Width of button border.</p>\n","default":2}}}}},"data":{"type":["Array"],"description":"<p><code>timeline</code> data. Each item of <code>Array</code> can be a instant value. If you need to set style individually for a data item, the <code>data</code> item should be written as <code>Object</code>. In then <code>Object</code>, the attribute of <code>value</code> is numerical value. Other attributes, such as shown the examples below, could cover the attribute configurations in <code>timeline</code>.</p>\n<p>as follows:</p>\n<pre><code class=\"lang-javascript\">[\n '2002-01-01',\n '2003-01-01',\n '2004-01-01',\n {\n value: '2005-01-01',\n tooltip: { // enables `tooltip` to be displayed as mouse hovering to this item.\n formatter: '{b} xxxx'\n },\n symbol: 'diamond', // the special setting of this item's symbol.\n symbolSize: 16 // the special setting of this item's size.\n },\n '2006-01-01',\n '2007-01-01',\n '2008-01-01',\n '2009-01-01',\n '2010-01-01',\n {\n value: '2011-01-01',\n tooltip: { // enables `tooltip` to be displayed as mouse hovering to this item.\n formatter: function (params) {\n return params.name + 'xxxx';\n }\n },\n symbol: 'diamond',\n symbolSize: 18\n },\n]\n</code></pre>\n"}}},"graphic":{"type":["*"],"description":"<p><code>graphic</code> component enable creating graphic elements in echarts.</p>\n<p>Those graphic type are supported.</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n<p>This example shows how to make a watermark and text block:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-graphic&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>This example use hidden graphic elements to implement dragging:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><strong>Graphic Component Configuration</strong></p>\n<p>A simple way to define a graphic element:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n ...,\n graphic: {\n type: 'image',\n ...\n }\n});\n</code></pre>\n<p>Define multiple graphic elements:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n ...,\n graphic: [\n { // A 'image' element.\n type: 'image',\n ...\n },\n { // A 'text' element, with id specified.\n type: 'text',\n id: 'text1',\n ...\n },\n { // A 'group' element, in which children can be defined.\n type: 'group',\n children: [\n {\n type: 'rect',\n id: 'rect1',\n ...\n },\n {\n type: 'image',\n ...\n },\n ...\n ]\n }\n ...\n ]\n});\n</code></pre>\n<p>How to remove or replace existing elements by <code>setOption</code>:</p>\n<pre><code class=\"lang-javascript\">myChart.setOption({\n ...,\n graphic: [\n { // Remove the element 'text1' defined above.\n id: 'text1',\n $action: 'remove',\n ...\n },\n { // Replace the element 'rect1' to a new circle element.\n // Note, although in the sample above 'rect1' is a children of a group,\n // it is not necessary to consider level relationship when setOption\n // again if you use id to specify them.\n id: 'rect1',\n $action: 'replace',\n type: 'circle',\n ...\n }\n ]\n});\n</code></pre>\n<p>Notice, when using <code>setOption</code> to modify existing elements, if id is not specified, new options will be mapped to exsiting elements by their order, which might bring unexpected result sometimes. So, generally, using id is recommended.</p>\n<p><br></p>\n<hr>\n<p><strong>Graphic Element Configuration</strong></p>\n<p>Different types of graphic elements has their own configuration respectively, but they have these common configuration below:</p>\n<pre><code class=\"lang-javascript\">{\n // id is used to specifying element when willing to update it.\n // id can be ignored if you do not need it.\n id: 'xxx',\n\n // Specify element type. Can not be ignored when define a element at the first time.\n type: 'image',\n\n // All of the properties below can be ignored and a default value will be assigned.\n\n // Specify the operation should be performed to the element when calling `setOption`.\n // Default value is 'merge', other values can be 'replace' or 'remove'.\n $action: 'replace',\n\n // These four properties is used to locating the element. Each property can be absolute\n // value (like 10, means 10 pixel) or precent (like '12%') or 'center'/'middle'.\n left: 10,\n // right: 10,\n top: 'center',\n // bottom: '10%',\n\n shape: {\n // Here are configurations for shape, like `x`, `y`, `cx`, `cy`, `width`,\n // `height`, `r`, `points`, ...\n // Note, if `left`/`right`/`top`/`bottom` has been set, `x`/`y`/`cx`/`cy`\n // do not work here.\n },\n\n style: {\n // Here are configurations for style of the element, like `fill`, `stroke`,\n // `lineWidth`, `shadowBlur`, ...\n },\n\n // z value of the elements.\n z: 10,\n // Whether response to mouse events / touch events.\n silent: true,\n // Whether the element is visible.\n invisible: false,\n // Used to specify whether the entire transformed element (containing children if is group)\n // is confined in its container. Optional values: 'raw', 'all'.\n bounding: 'raw',\n // Can be dragged or not.\n draggable: false,\n // Event handler, can also be onmousemove, ondrag, ... (listed below)\n onclick: function () {...}\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Event Handlers of Graphic Element</strong></p>\n<p>These events are supported:\n<code>onclick</code>, <code>onmouseover</code>, <code>onmouseout</code>, <code>onmousemove</code>, <code>onmousewheel</code>, <code>onmousedown</code>, <code>onmouseup</code>, <code>ondrag</code>, <code>ondragstart</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondrop</code>.</p>\n<p><br></p>\n<hr>\n<p><strong>Hierarchy of Graphic Elements</strong></p>\n<p>Only <code>group</code> element has children, which enable a group of elements to be positioned and transformed together.</p>\n<p><br></p>\n<hr>\n<p><strong>Shape Configuration of Graphic Element</strong></p>\n<p>Elements with different types have different shape setting repectively. For example:</p>\n<pre><code class=\"lang-javascript\">{\n type: 'rect',\n shape: {\n x: 10,\n y: 10,\n width: 100,\n height: 200\n }\n},\n{\n type: 'circle',\n shape: {\n cx: 20,\n cy: 30,\n r: 100\n }\n},\n{\n type: 'image',\n style: {\n image: 'http://xxx.xxx.xxx/a.png',\n x: 100,\n y: 200,\n width: 230,\n height: 400\n }\n},\n{\n type: 'text',\n style: {\n text: 'This text',\n x: 100,\n y: 200\n }\n\n}\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Transforming and Absolutely Positioning of Graphic Element</strong></p>\n<p>Element can be transformed (translation, rotation, scale). See <a href=\"#graphic.elements.position\">position</a>, <a href=\"#graphic.elements.rotation\">rotation</a>, <a href=\"#graphic.elements.scale\">scale</a>, <a href=\"#graphic.elements.origin\">origin</a></p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n type: 'rect', // or any other types.\n\n // Translation, using [0, 0] by default.\n position: [100, 200],\n\n // Scale, using [1, 1] by default.\n scale: [2, 4],\n\n // Rotation, using 0 by default. Negative value means rotating clockwise.\n rotation: Math.PI / 4,\n\n // Origin point of rotation and scale, using [0, 0] by default.\n origin: [10, 20],\n\n shape: {\n // ...\n }\n}\n</code></pre>\n<ul>\n<li><p>Each element is transformed in the coordinate system of its parent, namely, transform of a element and its parent can be "stacked".</p>\n</li>\n<li><p>Transformation is performed by this order:</p>\n<ol>\n<li>Translate [-el.origin[0], -el.origin[1]]。</li>\n<li>Scale according to el.scale.</li>\n<li>Rotate according to el.rotation.</li>\n<li>Translate back according to el.origin.</li>\n<li>Translate according to el.position.</li>\n</ol>\n</li>\n<li>Namely, scaling and rotating firstly, and then translate. By this mechanism, translation does not affect origin of scale and rotation.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Relatively Positioning</strong></p>\n<p>In real application, size of a container is always not fixed. So mechanism of relative position is required. In <code>graphic</code> component, <a href=\"#graphic.elements.left\">left</a> / <a href=\"#graphic.elements.right\">right</a> / <a href=\"#graphic.elements.top\">top</a> / <a href=\"#graphic.elements.bottom\">bottom</a> / <a href=\"#graphic.elements.width\">width</a> / <a href=\"#graphic.elements.height\">height</a> are used to position element relatively.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{ // Position the image at the bottom center of its container.\n type: 'image',\n left: 'center', // Position at the center horizontally.\n bottom: '10%', // Position beyond the bottom boundary 10%.\n style: {\n image: 'http://xxx.xxx.xxx/a.png',\n width: 45,\n height: 45\n }\n},\n{ // Position the entire rotated group at the right-bottom corner of its container.\n type: 'group',\n right: 0, // Position at the right boundary.\n bottom: 0, // Position at the bottom boundary.\n rotation: Math.PI / 4,\n children: [\n {\n type: 'rect',\n left: 'center', // Position at horizontal center according to its parent.\n top: 'middle', // Position at vertical center according to its parent.\n shape: {\n width: 190,\n height: 90\n },\n style: {\n fill: '#fff',\n stroke: '#999',\n lineWidth: 2,\n shadowBlur: 8,\n shadowOffsetX: 3,\n shadowOffsetY: 3,\n shadowColor: 'rgba(0,0,0,0.3)'\n }\n },\n {\n type: 'text',\n left: 'center', // Position at horizontal center according to its parent.\n top: 'middle', // Position at vertical center according to its parent.\n style: {\n fill: '#777',\n text: [\n 'This is text',\n 'This is text',\n 'Print some text'\n ].join('\\n'),\n font: '14px Microsoft YaHei'\n }\n }\n ]\n}\n</code></pre>\n<p>Note, <a href=\"graphic.elements.bounding\" target=\"_blank\">bounding</a> can be used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p><br></p>\n<hr>\n<p>Detailed configurations are listed as follows.</p>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"elements":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><code>group</code> is the only type that can contain children, so that a group of elements can be positioned and transformed together.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"group"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code>'replace'</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code>'remove'</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code>'all'</code>: (default)\n Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code>'raw'</code>:\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"width":{"type":["number"],"description":"<p>Specify width of this <code>group</code>.</p>\n<p>This width is only used for the positioning of its children.</p>\n<p>When width is <code>0</code>, children can also be positioned according to its parent using <code>left: 'center'</code>.</p>\n","default":0},"height":{"type":["number"],"description":"<p>Specify height of this <code>group</code>.</p>\n<p>This height is only used for the positioning of its children.</p>\n<p>When height is <code>0</code>, children can also be positioned according to its parent using <code>top: 'middle'</code>.</p>\n","default":0},"diffChildrenByName":{"type":["boolean"],"description":"<p>In <a href=\"#series-custom\">custom series</a>, when <code>diffChildrenByName</code> is set as <code>true</code>, for each <a href=\"#graphic.elements-group\">group</a> returned from <a href=\"#series-custom.renderItem\">renderItem</a>, "diff" will be performed to its <a href=\"#graphic.elements-group.children\">children</a> according to the <a href=\"#graphic.elements-polygon.name\">name</a> attribute of each graphic elements. Here "diff" means that map the coming graphic elements to the existing graphic elements when repainting according to <code>name</code>, which enables the transition animation if data is modified.</p>\n<p>But notice that the operation is performance consuming, do not use it for large data amount.</p>\n","default":false},"children":{"type":["Array"],"description":"<p>A list of children, each item is a declaration of an element.</p>\n"},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"image"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code>'replace'</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code>'remove'</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code>'all'</code>: (default)\n Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code>'raw'</code>:\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"style":{"type":["Object"],"description":"","properties":{"image":{"type":["string"],"description":"<p>Specify contant of the image, can be a URL, or <a href=\"https://tools.ietf.org/html/rfc2397\" target=\"_blank\">dataURI</a>.</p>\n"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","default":0},"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Text block.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"text"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code>'replace'</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code>'remove'</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code>'all'</code>: (default)\n Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code>'raw'</code>:\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"style":{"type":["Object"],"description":"","properties":{"text":{"type":["string"],"description":"<p>Text content. <code>\\n</code> can be used as a line break.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"font":{"type":["string"],"description":"<p>Font size, font type, font weight, font color, follow the form of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font\" target=\"_blank\">css font</a>.</p>\n<p>For example:</p>\n<pre><code>// size | family\nfont: '2em "STHeiti", sans-serif'\n\n// style | weight | size | family\nfont: 'italic bolder 16px cursive'\n\n// weight | size | family\nfont: 'bolder 2em "Microsoft YaHei", sans-serif'\n</code></pre>"},"textAlign":{"type":["string"],"description":"<p>Text horizontal alignment. Optional values: <code>'left'</code>, <code>'center'</code>, <code>'right'</code>.</p>\n<p><code>'left'</code> means the left side of the text block is specified by the <a href=\"#graphic.elements-text.style.x\">style.x</a>, while <code>'right'</code> means the right side of the text block is specified by <a href=\"#graphic.elements-text.style.y\">style.y</a>.</p>\n","default":"'left'"},"textVerticalAlign":{"type":["string"],"description":"<p>Text vertical alignment. Optional values: <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>.</p>\n<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n"},"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Rectangle element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"rect"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code>'replace'</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code>'remove'</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code>'all'</code>: (default)\n Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code>'raw'</code>:\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n","default":0},"r":{"type":["Array"],"description":"<p>Specify border radius of the rectangular here. Generally, <code>r</code> should be <code>[topLeftRadius, topRightRadius, BottomRightRadius, bottomLeftRadius]</code>, where each item is a number.</p>\n<p>Abbreviation is enabled, for example:</p>\n<ul>\n<li><code>r</code>: <code>1</code> means <code>[1, 1, 1, 1]</code></li>\n<li><code>r</code>: <code>[1]</code> means <code>[1, 1, 1, 1]</code></li>\n<li><code>r</code>: <code>[1, 2]</code> means <code>[1, 2, 1, 2]</code></li>\n<li><code>r</code>: <code>[1, 2, 3]</code> means <code>[1, 2, 3, 2]</code></li>\n</ul>\n"}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Circle element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"circle"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code>'replace'</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code>'remove'</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code>'all'</code>: (default)\n Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code>'raw'</code>:\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Ring element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"ring"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code>'replace'</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code>'remove'</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code>'all'</code>: (default)\n Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code>'raw'</code>:\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Sector element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"sector"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code>'replace'</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code>'remove'</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code>'all'</code>: (default)\n Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code>'raw'</code>:\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>start angle, in radian.</p>\n","default":0},"endAngle":{"type":["number"],"description":"<p>end anble, in radian.</p>\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"<p>Whether draw clockwise.</p>\n","default":true}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Arc element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"arc"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code>'replace'</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code>'remove'</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code>'all'</code>: (default)\n Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code>'raw'</code>:\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>start angle, in radian.</p>\n","default":0},"endAngle":{"type":["number"],"description":"<p>end anble, in radian.</p>\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"<p>Whether draw clockwise.</p>\n","default":true}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Polygon element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"polygon"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code>'replace'</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code>'remove'</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code>'all'</code>: (default)\n Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code>'raw'</code>:\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"<p>A list of points, which defines the shape, like <code>[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"type":["number","string"],"description":"<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code>[0, 1]</code>.</li>\n<li>If the value is <code>'spline'</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code>smooth</code> is <code>number</code> (bezier smooth).</p>\n","default":false}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Polyline element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"polyline"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code>'replace'</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code>'remove'</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code>'all'</code>: (default)\n Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code>'raw'</code>:\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"<p>A list of points, which defines the shape, like <code>[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"type":["number","string"],"description":"<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code>[0, 1]</code>.</li>\n<li>If the value is <code>'spline'</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code>smooth</code> is <code>number</code> (bezier smooth).</p>\n","default":false}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":5},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Line element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"line"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code>'replace'</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code>'remove'</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code>'all'</code>: (default)\n Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code>'raw'</code>:\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"<p>x value of the start point.</p>\n","default":0},"y1":{"type":["number"],"description":"<p>y value of the start point.</p>\n","default":0},"x2":{"type":["number"],"description":"<p>x value of the end point.</p>\n","default":0},"y2":{"type":["number"],"description":"<p>y value of the end point.</p>\n","default":0},"percent":{"type":["number"],"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n","default":1}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":5},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}},{"type":["Object"],"description":"<p>Quadratic bezier curve or cubic bezier curve.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#graphic.elements-image\">image</a>,\n<a href=\"#graphic.elements-text\">text</a>,\n<a href=\"#graphic.elements-circle\">circle</a>,\n<a href=\"#graphic.elements-sector\">sector</a>,\n<a href=\"#graphic.elements-ring\">ring</a>,\n<a href=\"#graphic.elements-polygon\">polygon</a>,\n<a href=\"#graphic.elements-polyline\">polyline</a>,\n<a href=\"#graphic.elements-rect\">rect</a>,\n<a href=\"#graphic.elements-line\">line</a>,\n<a href=\"#graphic.elements-bezierCurve\">bezierCurve</a>,\n<a href=\"#graphic.elements-arc\">arc</a>,\n<a href=\"#graphic.elements-group\">group</a>,</p>\n","default":"bezierCurve"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"$action":{"type":["string"],"description":"<p>Specify the operation should be performed to the element when calling <code>setOption</code>.\nDefault value is 'merge', other values can be 'replace' or 'remove'.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>'merge'</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code>'replace'</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code>'remove'</code>: delete the existing element (if any).</li>\n</ul>\n","default":"'merge'"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#graphic.elements-polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#graphic.elements-polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#graphic.elements-polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#graphic.elements-polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#graphic.elements-group\">group</a> or the root canvas). Thus we are able to <a href=\"#graphic.elements-group\">group</a> multiple elements, and <a href=\"#graphic.elements-group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"left":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"right":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code>'center'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.left\">left</a> and <a href=\"#graphic.elements-polygon.right\">right</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.left\">left</a> or <a href=\"#graphic.elements-polygon.right\">right</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>x</code>, <code>cx</code>) will not work.</p>\n","default":"undefined"},"top":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bottom":{"type":["number","string"],"description":"<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the contianer of the chart instance.\nOtherwise, the parent is a <code>group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code>30</code>, means <code>30px</code>.</li>\n<li>Percent value: For example, can be a string <code>'33%'</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code>'middle'</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href=\"#graphic.elements-polygon.top\">top</a> and <a href=\"#graphic.elements-polygon.bottom\">bottom</a> can work.</p>\n<p>If <a href=\"#graphic.elements-polygon.top\">top</a> or <a href=\"#graphic.elements-polygon.bottom\">bottom</a> is specified, positioning attributes in <a href=\"#graphic.elements-polygon.shape\">shape</a> (like <code>y</code>, <code>cy</code>) will not work.</p>\n","default":"undefined"},"bounding":{"type":["strin"],"description":"<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/graphic-bounding&edit=1&reset=1\" width=\"500\" height=\"500\" ></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code>'all'</code>: (default)\n Use the transformed bounding box of itself and its descentants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code>'raw'</code>:\n Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n","default":"'all'"},"z":{"type":["number"],"description":"<p>z value of the elements, determine the overlap order.</p>\n","default":0},"zlevel":{"type":["number"],"description":"<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n","default":0},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"draggable":{"type":["boolean"],"description":"<p>Can be dragged or not.</p>\n","default":false},"progressive":{"type":["boolean"],"description":"<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"<p>x value of the start point.</p>\n","default":0},"y1":{"type":["number"],"description":"<p>y value of the start point.</p>\n","default":0},"x2":{"type":["number"],"description":"<p>x value of the end point.</p>\n","default":0},"y2":{"type":["number"],"description":"<p>y value of the end point.</p>\n","default":0},"cpx1":{"type":["number"],"description":"<p>x of control point.</p>\n","default":0},"cpy1":{"type":["number"],"description":"<p>y of control point.</p>\n","default":0},"cpx2":{"type":["number"],"description":"<p>x of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code>cpx2</code> and <code>cpy2</code> are not set, quatratic bezier is used.</p>\n","default":null},"cpy2":{"type":["number"],"description":"<p>y of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code>cpx2</code> and <code>cpy2</code> are not set, quatratic bezier is used.</p>\n","default":null},"percent":{"type":["number"],"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n","default":1}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"onclick":{"type":["Function"],"description":""},"onmouseover":{"type":["Function"],"description":""},"onmouseout":{"type":["Function"],"description":""},"onmousemove":{"type":["Function"],"description":""},"onmousewheel":{"type":["Function"],"description":""},"onmousedown":{"type":["Function"],"description":""},"onmouseup":{"type":["Function"],"description":""},"ondrag":{"type":["Function"],"description":""},"ondragstart":{"type":["Function"],"description":""},"ondragend":{"type":["Function"],"description":""},"ondragenter":{"type":["Function"],"description":""},"ondragleave":{"type":["Function"],"description":""},"ondragover":{"type":["Function"],"description":""},"ondrop":{"type":["Function"],"description":""}}}]},"description":"<p>A list of all graphic elements.</p>\n<p>Note, the standard configuration of graphic component is:</p>\n<pre><code class=\"lang-javascript\">{\n graphic: {\n elements: [\n {type: 'rect', ...}, {type: 'circle', ...}, ...\n ]\n }\n}\n</code></pre>\n<p>But we always use short patterns for convenience:</p>\n<pre><code class=\"lang-javascript\">{\n graphic: { // Declare only one graphic element.\n type: 'rect',\n ...\n }\n}\n</code></pre>\n<p>Or:</p>\n<pre><code class=\"lang-javascript\">{\n graphic: [ // Declare multiple graphic elements.\n {type: 'rect', ...}, {type: 'circle', ...}, ...\n ]\n}\n</code></pre>\n"}}},"calendar":{"type":["Object"],"description":"<p>Calendar coordinates.</p>\n<p>In ECharts, we are very creative to achieve the calendar chart, by using the calendar coordinates to achieve the calendar chart,\nas shown in the following example, we can use calendar coordinates in heatmap, scatter, effectScatter, and graph.</p>\n<p>Example of using heatmap in calendar coordinates:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p>Example of using effectScatter in calendar coordinates:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-effectscatter&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p>Example of using graph in calendar coordinates:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-graph&edit=1&reset=1\" width=\"600\" height=\"600\" ></iframe>\n\n\n<p>Combination calendar coordinate system and charts, you may be able to create more wonderful effects.</p>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=calendar-lunar&edit=1&reset=1\" target=\"_blank\">Display Text in Calendar</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=calendar-pie&edit=1&reset=1\" target=\"_blank\">Display Pies in Calendar</a></p>\n<hr>\n<p><strong>Calendar layout</strong></p>\n<p>Calendar coordinate system can be placed horizontally or vertically. By convention, the heatmap calendar is horizontal. But if we need bigger cell size in other cases, the total width may be too wide. So <a href=\"#calendar.orient\">calendar.orient</a> can help in this case.</p>\n<hr>\n<p><strong>Adapt to container size</strong></p>\n<p>Calendar coordinate system can be configured to adapt to container size, which is useful when page size is not sure. First of all, like other components, those location and size configurations can be specified on canlendar: <a href=\"#calendar.left\">left</a> <a href=\"#calendar.right\">right</a> <a href=\"#calendar.top\">top</a> <a href=\"bottom\" target=\"_blank\">bottom</a> <a href=\"#calendar.width\">width</a> <a href=\"#calendar.height\">height</a>, which make calendar possible to modify its size according to container size. Besides, <a href=\"#calendar.cellSize\">cellSize</a> can be specified to fix the size of each cell of calendar.</p>\n<hr>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between calendar component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":80},"top":{"type":["string","number"],"description":"<p>Distance between calendar component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":60},"right":{"type":["string","number"],"description":"<p>Distance between calendar component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between calendar component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["number","string"],"description":"<p>The height of calendar coordinates.</p>\n<p>Note: <code>cellSize</code> is 20 by default. If <code>width</code> is set,\n <code>cellSize[0]</code> will be forced to <code>auto</code>;</p>\n","default":"auto"},"height":{"type":["number","string"],"description":"<p>The height of calendar coordinates.</p>\n<p>Note: <code>cellSize</code> is 20 by default. If <code>height</code> is set,\n <code>cellSize[1]</code> will be forced to <code>auto</code>;</p>\n","default":"auto"},"range":{"type":["number","string","Array"],"description":"<p>Required, range of Calendar coordinates, support multiple formats.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\n// one year\nrange: 2017\n\n// one month\nrange: '2017-02'\n\n// a range\nrange: ['2017-01-02', '2017-02-23']\n\n// note: they will be identified as ['2017-01-01', '2017-02-01']\nrange: ['2017-01', '2017-02']\n</code></pre>\n"},"cellSize":{"type":["number","Array"],"description":"<p>The size of each rect of calendar coordinates, can be set to a single value or array, the first element is width and the second element is height.</p>\n<p>Support setting self-adaptation: <code>auto</code>, the default width and height to be 20.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\n// Set the width and height to be 20\ncellSize: 20\n\n// Set the width to be 20, and height to be 40\ncellSize: [20, 40]\n\n// Set width and height to be self-adaptation\ncellSize: [40]\n\n// Set the width and height to be 20\ncellSize: 'auto'\n\n// Set the width to be self-adaptation, and height to be 40\ncellSize: ['auto', 40]\n</code></pre>\n","default":20},"orient":{"type":["string"],"description":"<p>The layout orientation of calendar.</p>\n<p>Options:</p>\n<ul>\n<li>'horizontal'</li>\n<li>'vertical'</li>\n</ul>\n","default":"'horizontal'"},"splitLine":{"type":["Object"],"description":"<p>Calendar coordinates splitLine style.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the splitLine from showing</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>splitLineLine color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#000"},"width":{"type":["number"],"description":"<p>splitLine line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p>splitLine line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">calendar: [{\n splitLine: {\n show: true,\n lineStyle: {\n color: '#000',\n width: 1,\n type: 'solid'\n }\n }\n}]\n</code></pre>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Every rect style in calendar coordinates.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>calendar color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>calendar border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'#ccc'"},"borderWidth":{"type":["number"],"description":"<p>calendar border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">calendar: [{\n itemStyle: {\n color: '#fff',\n borderWidth: 1,\n borderColor: '#ccc'\n }\n}]\n</code></pre>\n"}}},"dayLabel":{"type":["Object"],"description":"<p>Day style in calendar coordinates.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent dayLabel from showing.</p>\n","default":true},"firstDay":{"type":["number"],"description":"<p>A week from the beginning of the week, the default starting on Sunday.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\ncalendar: [{\n dayLabel: {\n firstDay: 1 // start on Monday\n }\n}]\n</code></pre>\n","default":0},"margin":{"type":["number"],"description":"<p>The margin between the day label and the axis line.</p>\n","default":0},"position":{"type":["string"],"description":"<p>Position of week, at the beginning or end of the range.</p>\n<p>Options:</p>\n<ul>\n<li>'start'</li>\n<li>'end'</li>\n</ul>\n","default":"'start'"},"nameMap":{"type":["string","Array"],"description":"<p>Week text content, defaults to 'en';\nIt supports Chinese, English, and custom;\nindex 0 always means Sunday;</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">\n// shortcut to English ['S', 'M', 'T', 'W', 'T', 'F', 'S'],\nnameMap: 'en'\n\n// shortcut to Chinese ['日', '一', '二', '三', '四', '五', '六']\nnameMap: 'cn'\n\n// Custom settings: mixed in English and Chinese or not displayed\nnameMap: ['S', '一', 'T', '三', '', '五', 'S'],\n\ncalendar: [{\n dayLabel: {\n nameMap: 'en'\n }\n}]\n</code></pre>\n","default":"'en'"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#000"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"monthLabel":{"type":["Object"],"description":"<p>Month label in calendar coordinates.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent monthLabel from showing.</p>\n","default":true},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"margin":{"type":["number"],"description":"<p>The margin between the month label and the axis line.</p>\n","default":5},"position":{"type":["string"],"description":"<p>Position of week, at the beginning or end of the range.</p>\n<p>Options:</p>\n<ul>\n<li>'start'</li>\n<li>'end'</li>\n</ul>\n","default":"'start'"},"nameMap":{"type":["string","Array"],"description":"<p>Month text content, defaults to 'en';\nIt supports Chinese, English, and custom;\nIndex 0 always means Jan;</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">// Shortcut to English [\n 'Jan', 'Feb', 'Mar',\n 'Apr', 'May', 'Jun',\n 'Jul', 'Aug', 'Sep',\n 'Oct', 'Nov', 'Dec'\n ],\nnameMap: 'en'\n\n// Shortcut to Chinese [\n '一月', '二月', '三月',\n '四月', '五月', '六月',\n '七月', '八月', '九月',\n '十月', '十一月', '十二月'\n ]\nnameMap: 'cn'\n\n// Custom settings: mixed in English and Chinese or not displayed\nnameMap: [\n '一月', 'Feb', '三月',\n '四月', 'May', '六月',\n '七月', '八月', '',\n '十月', 'Nov', '十二月'\n ],\n\n\ncalendar: [{\n monthLabel: {\n nameMap: 'en'\n }\n}]\n</code></pre>\n","default":"'en'"},"formatter":{"type":["string","Function"],"description":"<p>Formatter of month text label, which supports string template and callback function.</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">// Use string template; eg: 2017-02\n/*\n template variables:\n {nameMap} default nameMap eg：'Feb'\n {yyyy} four-digit years eg: 2017\n {yy} two-digit years eg: 17\n {MM} two-digit month eg: 02\n {M} single-digit month eg: 2\n*/\nformatter: '{yyyy}-{MM}'\n\n// Use callback function;\n/*\n function parameters:\n param.nameMap default nameMap eg：'Feb'\n param.yyyy four-digit years eg: 2017\n param.yy two-digit years eg: 17\n param.MM two-digit month eg: 02\n param.M single-digit eg: 2\n*/\nformatter: function (param) {\n // ...\n return param.MM;\n}\n</code></pre>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#000"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"yearLabel":{"type":["Object"],"description":"<p>Year label in calendar coordinates.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to stop yearLabel from showing</p>\n","default":true},"margin":{"type":["number"],"description":"<p>The margin between the month label and the axis line.</p>\n","default":30},"position":{"type":["string"],"description":"<p>Position of year.</p>\n<p>Default:\nwhen orient is set as <code>horizontal</code>, position is <code>left</code>\nwhen orient is set as <code>vertical</code>, position is <code>top</code></p>\n<p>Options:</p>\n<ul>\n<li>'top'</li>\n<li>'bottom'</li>\n<li>'left'</li>\n<li>'right'</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p>Formatter of year text label, which supports string template and callback function.</p>\n<p>By default, the current range of the year, if the interval across the year, showing the first year and the last year</p>\n<p>Examples:</p>\n<pre><code class=\"lang-js\">// Use string template; eg: ['2017-10-11', '2018-01-21']\n/*\n template variables:\n {nameMap} default nameMap eg：'2017-2018'\n {start} start year eg: 2017\n {end} end year eg: 2018\n*/\n\nformatter: '{start}-{end}'\n\n// Use callback function;\n/*\n function parameters:\n param.nameMap default nameMap eg：'2017-2018'\n param.start start year eg: 2017\n param.end end year eg: 2018\n*/\nformatter: function (param) {\n // ...\n return param.end;\n}\n</code></pre>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false}}},"dataset":{"type":["Object"],"description":"<p><code>dataset</code> component is published since ECharts 4. <code>dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, is enables data encoding from data to visual, which brings convenience in some scenarios.</p>\n<p>More details about <code>dataset</code> can be checked in the <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#dataset\" target=\"_blank\">tutorial</a>.</p>\n<hr>\n","properties":{"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"source":{"type":["Array","Object"],"description":"<p>Source data. Generally speaking, a source data describe a table, where these format below can be applied:</p>\n<p>2d array, where <a href=\"#dataset.dimensions\">dimension names</a> can be provided in the first row/column, or do not provide, only data.</p>\n<pre><code class=\"lang-js\">[\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n]\n</code></pre>\n<p>Row based key-value format (object array), where the keys indicate <a href=\"#dataset.dimensions\">dimension names</a>.</p>\n<pre><code class=\"lang-js\">[\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n]\n</code></pre>\n<p>Column based key-value format, where each value represents a column of a table.</p>\n<pre><code class=\"lang-js\">{\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n}\n</code></pre>\n<p>More details about <code>dataset</code> can be checked in the <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#dataset\" target=\"_blank\">tutorial</a>.</p>\n"},"dimensions":{"type":["Array"],"description":"<p><code>dimensions</code> can be used to define dimension info for <code>series.data</code> or <code>dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code>dimensions</code> here. But if <code>dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code>dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // Specify name for each dimesions, which will be displayed in tooltip.\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: [\n null, // If you do not intent to defined this dimension, use null is fine.\n {type: 'ordinal'}, // Specify type of this dimension.\n // 'ordinal' is always used in string.\n // If type is not specified, echarts will guess type by data.\n {name: 'good', type: 'number'},\n 'bad' // Equals to {name: 'bad'}.\n ]\n}\n</code></pre>\n<p>Each data item of <code>dimensions</code> can be:</p>\n<ul>\n<li><code>string</code>, for example, <code>'someName'</code>, which equals to <code>{name: 'someName'}</code>.</li>\n<li><code>Object</code>, where the attributes can be:<ul>\n<li>name: <code>string</code>.</li>\n<li>type: <code>string</code>, supports:<ul>\n<li><code>number</code></li>\n<li><code>float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code>int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code>ordinal</code>, discrete value, which represents string generally.</li>\n<li><code>time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code>string</code>, generally used in tooltip for dimension display. If not specified, use <code>name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code>dimensions</code> is specified, the default <code>tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code>tooltip</code> will displayed only value horizontally.</p>\n"},"sourceHeader":{"type":["boolean"],"description":"<p>Whether the first row/column of <code>dataset.source</code> represents <a href=\"dataset.dimensions\" target=\"_blank\">dimension names</a>. Optional values:</p>\n<ul>\n<li><code>null/undefine</code>: means auto detect whether the first row/column is dimension names or data.</li>\n<li><code>true</code>: the first row/column is dimension names.</li>\n<li><code>false</code>: data start from the first row/column.</li>\n</ul>\n<p>Note: "the first row/column" means that if <a href=\"#series.seriesLayoutBy\">series.seriesLayoutBy</a> is set as <code>'column'</code>, pick the first row, otherwise, if it is set as <code>'row'</code>, pick the first column.</p>\n"}}},"aria":{"type":["*"],"description":"<p>W3C defined the Accessible Rich Internet Applications Suite (<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>) to make Web content and Web applications more accessible to the disabled. From ECharts 4.0, we support ARIA by generating description for charts automatically.</p>\n<p>By default, ARIA is disabled. To enable it, you should set <a href=\"#aria.show\">aria.show</a> to be <code>true</code>. After enabling, it will generate descriptions based on charts, series, data, and so on. Users may change the generated description.</p>\n<p><strong>For example:</strong></p>\n<p>For config:</p>\n<pre><code class=\"lang-js\">option = {\n aria: {\n show: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>There should be an <code>aria-label</code> attribute on the chart DOM, which can help the disabled understand the content of charts with the help of certain devices. The value of the label is:</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。\n</code></pre><p>The default language is in Chinese, but you can configure it with templates. The following document shows how to do it.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to enable ARIA. When enabled, there should be an <code>aria-label</code> label.</p>\n","default":false},"description":{"type":["string"],"description":"<p>By default, the description is generated by our algorithm based on charts. If user want to set the description totally, <code>description</code> should be set to the whole description.</p>\n<p>This is useful when single data values cannot represent what the chart means. For example, if the chart is a map containing many scatter points. Default description can only show the data, but the users may find it hard to understand what the user mean. In this case, <code>description</code> should be set to discribe the meaning of chart.</p>\n","default":null},"general":{"type":["Object"],"description":"<p>General discription of chart.</p>\n","properties":{"withTitle":{"type":["string"],"description":"<p>If <a href=\"#title.text\">title.text</a> exists, then this is used. Template variable:</p>\n<ul>\n<li><code>{title}</code>: will be replaced by <a href=\"#title.text\">title.text</a>.</li>\n</ul>\n","default":"'这是一个关于“{title}”的图表。'"},"withoutTitle":{"type":["string"],"description":"<p>If <a href=\"#title.text\">title.text</a> does not exist, then this is used.</p>\n","default":"'这是一个图表，'"}}},"series":{"type":["Object"],"description":"<p>Series-related configures.</p>\n","properties":{"maxCount":{"type":["number"],"description":"<p>Maximum series number.</p>\n","default":10},"single":{"type":["Object"],"description":"<p>Description used when there is only one chart.</p>\n","properties":{"prefix":{"type":["string"],"description":"<p>General description for all series. This displays before all series descriptions. Template variable:</p>\n<ul>\n<li><code>{seriesCount}</code>: will be replaced by series count, which is 1.</li>\n</ul>\n","default":"''"},"withName":{"type":["string"],"description":"<p>If chart contains <code>name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code>{seriesName}</code>: will be replaced by series <code>name</code>;</li>\n<li><code>{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n","default":"'图表类型是{seriesType}，表示{seriesName}。'"},"withoutName":{"type":["string"],"description":"<p>If chart doesn't contain <code>name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code>{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n","default":"'图表类型是{seriesType}。'"}}},"multiple":{"type":["Object"],"description":"<p>Description used when there are more than one chart.</p>\n","properties":{"prefix":{"type":["string"],"description":"<p>General description for all series. This displays before all series descriptions. Template variable:</p>\n<ul>\n<li><code>{seriesCount}</code>: will be replaced by series count.</li>\n</ul>\n","default":"'它由{seriesCount}个图表系列组成。'"},"withName":{"type":["string"],"description":"<p>If series contains <code>name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code>{seriesName}</code>: will be replaced by series <code>name</code>;</li>\n<li><code>{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n","default":"'图表类型是{seriesType}，表示{seriesName}。'"},"withoutName":{"type":["string"],"description":"<p>If series doesn't contain <code>name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code>{seriesType}</code>: will be replaced by series type name.</li>\n</ul>\n","default":"'图表类型是{seriesType}。'"},"separator":{"type":["Object"],"description":"<p>Separators between series and series.</p>\n","properties":{"middle":{"type":["string"],"description":"<p>Separators other than the last one.</p>\n","default":"'；'"},"end":{"type":["string"],"description":"<p>The last series seperator.</p>\n","default":"'。'"}}}}}}},"data":{"type":["Object"],"description":"<p>Data-related configures.</p>\n","properties":{"maxCount":{"type":["number"],"description":"<p>Maximum data number.</p>\n","default":10},"allData":{"type":["string"],"description":"<p>Description used when all data is displayed. Note that this option will <strong>not</strong> set to display all data. If all data should be displayed, <a href=\"#aria.data.maxCount\">aria.data.maxCount</a> should be set to be <code>Number.MAX_VALUE</code>.</p>\n","default":"'其数据是——'"},"partialData":{"type":["string"],"description":"<p>Description used when only part of data is displayed. Template variable:</p>\n<ul>\n<li><code>{displayCnt}</code>: number of data displayed.</li>\n</ul>\n","default":"'其中，前{displayCnt}项是——'"},"withName":{"type":["string"],"description":"<p>If data contains <code>name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code>{name}</code>: will be replaced by data <code>name</code>;</li>\n<li><code>{value}</code>: will be replaced by data value.</li>\n</ul>\n","default":"'{name}的数据是{value}'"},"withoutName":{"type":["string"],"description":"<p>If data doesn't contain <code>name</code> attribute, then this is used. Template variable:</p>\n<ul>\n<li><code>{value}</code>: will be replaced by data value.</li>\n</ul>\n","default":"'{value}'"},"separator":{"type":["Object"],"description":"<p>Separators between data and data.</p>\n","properties":{"middle":{"type":["string"],"description":"<p>Separators other than the last one.</p>\n","default":"'，'"},"end":{"type":["string"],"description":"<p>The last data seperator.</p>\n<p>Note that since series <code>separator.end</code> is used after the last data, <code>data.separator.end</code> is not needed in most cases.</p>\n","default":"''"}}}}}}},"series":{"type":"Array","items":{"anyOf":[{"type":["Object"],"description":"<p><strong>broken line chart</strong></p>\n<p>Broken line chart relates all the data points <a href=\"#series-line.symbol\">symbol</a> by broken lines, which is used to show the trend of data changing. It could be used in both <a href=\"#grid\">rectangular coordinate</a> and<a href=\"#polar\">polar coordinate</a>.</p>\n<p><strong>Tip:</strong> When <a href=\"#series-line.areaStyle\">areaStyle</a> is set, area chart will be drew.</p>\n<p><strong>Tip:</strong> With <a href=\"#visualMap-piecewise\">visualMap</a> component, Broken line / area chart can have different colors on different sections, as below:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-aqi&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'line'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'polar'</code></p>\n<p> Use polar coordinates, with <a href=\"#series-bar.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-line.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":4},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"showSymbol":{"type":["boolean"],"description":"<p>Whether to show symbol. It would be shown during tooltip hover.</p>\n","default":true},"showAllSymbol":{"type":["boolean"],"description":"<p>Only work when main axis is <code>'category'</code> axis (<code>axis.type</code> is <code>'category'</code>). Optional values:</p>\n<ul>\n<li><code>'auto'</code>: Default value. Show all symbols if there is enough space. Otherwise follow the interval strategy with with <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a>.</li>\n<li><code>true</code>: Show all symbols.</li>\n<li><code>false</code>: Follow the interval strategy with <a href=\"#xAxis.axisLabel.interval\">axisLabel.interval</a>.</li>\n</ul>\n","default":"'auto'"},"hoverAnimation":{"type":["boolean"],"description":"<p>Set this to <code>false</code> to prevent the animation effect when the mouse is hovering over a symbol</p>\n","default":true},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"stack":{"type":["string"],"description":"<p>If stack the value. On the same category axis, the series with the same <code>stack</code> name would be put on top of each other.</p>\n<p>The effect of the below example could be seen through stack switching of <a href=\"#toolbox\">toolbox</a> on the top right corner:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/line-stack-tiled&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n","default":null},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"connectNulls":{"type":["boolean"],"description":"<p>Whether to connect the line across null points.</p>\n","default":false},"clipOverflow":{"type":["boolean"],"description":"<p>Whether to clip the overflowing part, which defaults to clip.</p>\n","default":true},"step":{"type":["string","boolean"],"description":"<p>Whether to show as a step line. It can be <code>true</code>, <code>false</code>. Or <code>'start'</code>, <code>'middle'</code>, <code>'end'</code>. Which will configure the turn point of step line.</p>\n<p>See the example using different <code>step</code> options:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-step&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n","default":false},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'top'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>The style of the symbol point of broken line.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) => Color\n</code></pre>\n<p>Input parameters are <code>seriesIndex</code>, <code>dataIndex</code>, <code>data</code>, <code>value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>Line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"<p>The style of area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"origin":{"type":["string"],"description":"<p>Origin position of area.</p>\n<p>By default, the area between axis line and data will be the area to be filled. This config enables you to fill data to the max or min of the axis data.</p>\n<p>Valid values include: <code>'auto'</code> (default), <code>'start'</code>, <code>'end'</code>.</p>\n<ul>\n<li><code>'auto'</code> to fill between axis line to data;</li>\n<li><code>'start'</code> to fill between min axis value (when not <code>inverse</code>) to data;</li>\n<li><code>'end'</code> to fill between max axis value (when not <code>inverse</code>) to data;</li>\n</ul>\n","default":"'auto'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>图形的高亮样式。</p>\n","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"smooth":{"type":["boolean","number"],"description":"<p>Whether to show as smooth curve.</p>\n<p>If is typed in <code>boolean</code>, then it means whether to enable smoothing. If is typed in <code>number</code>, valued from 0 to 1, then it means smoothness. A smaller value makes it less smooth.</p>\n<p>Please refer to <a href=\"#series-line.smoothMonotone\">smoothMonotone</a> to change smoothing algorithm.</p>\n","default":false},"smoothMonotone":{"type":["string"],"description":"<p>Whether the broken line keep the monotonicity when it is smoothed. It can be set as <code>'x'</code>, <code>'y'</code> to keep the monotonicity on x axis or y axis. Or it can be set to be <code>'none'</code> to use non-monotone smoothing algorithm.</p>\n<p>From ECharts 4.0.3, we improved our default smoothing algorithm. The old algorithm can be used by setting <code>smoothMonotone</code> to be <code>'none'</code>. Here's the difference between old and new algorithm. In the following chart, old algorithm is in green color, and new algorithm is in red color.</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/smooth-old-vs-new.png\"></p>\n<p>The old algorithm has many problems:</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/smooth-old-problem.png\"></p>\n<p>Old algorithm uses the previous and next point to form control points' direction, while they are always horizontal (when the first dimension of data is monotone) or vertical (when the second dimension of data is monotone) in new algorithm.</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/smooth-algorithm.png\"></p>\n<p>But new algorithm doesn't work with non-monotone data.</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/smooth-non-monotone-x.png\"></p>\n<p>So we suggest that default value of <code>smoothMonotone</code> be used in most situations. If data on Y axis is monotone, it should be set to be <code>'y'</code>. If data is non-monotone, it should be set to be <code>'none'</code> to use the old algorithm.</p>\n"},"sampling":{"type":["string"],"description":"<p>The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.</p>\n<p>Options:</p>\n<ul>\n<li><code>'average'</code> Use average value of filter points</li>\n<li><code>'max'</code> Use maximum value of filter points</li>\n<li><code>'min'</code> Use minimum value of filter points</li>\n<li><code>'sum'</code> Use sum of filter points</li>\n</ul>\n"},"dimensions":{"type":["Array"],"description":"<p><code>dimensions</code> can be used to define dimension info for <code>series.data</code> or <code>dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code>dimensions</code> here. But if <code>dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code>dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // Specify name for each dimesions, which will be displayed in tooltip.\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: [\n null, // If you do not intent to defined this dimension, use null is fine.\n {type: 'ordinal'}, // Specify type of this dimension.\n // 'ordinal' is always used in string.\n // If type is not specified, echarts will guess type by data.\n {name: 'good', type: 'number'},\n 'bad' // Equals to {name: 'bad'}.\n ]\n}\n</code></pre>\n<p>Each data item of <code>dimensions</code> can be:</p>\n<ul>\n<li><code>string</code>, for example, <code>'someName'</code>, which equals to <code>{name: 'someName'}</code>.</li>\n<li><code>Object</code>, where the attributes can be:<ul>\n<li>name: <code>string</code>.</li>\n<li>type: <code>string</code>, supports:<ul>\n<li><code>number</code></li>\n<li><code>float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code>int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code>ordinal</code>, discrete value, which represents string generally.</li>\n<li><code>time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code>string</code>, generally used in tooltip for dimension display. If not specified, use <code>name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code>dimensions</code> is specified, the default <code>tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code>tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code>data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // Each column is called a dimension.\n // There are five dimensions: 0, 1, 2, 3, 4。\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n encode: {\n x: [3, 1, 5], // Dimension 3, 1, 5 is mapped to x axis.\n y: 2, // Dimension 2 is mapped to y axis.\n tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n }\n }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code>encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n encode: {\n x: 'date',\n y: ['open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" target=\"_blank\">example</a> for <code>encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code>encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n xAxis: {},\n yAxis: {},\n dataZoom: [{\n xAxisIndex: 0\n }, {\n yAxisIndex: 0\n }],\n series: {\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'circle',\n shape: {\n cx: 100, // x position is always 100\n cy: api.coord([0, api.value(0)])[1],\n r: 30\n },\n style: {\n fill: 'blue'\n }\n };\n },\n encode: {\n // Then the series will not be controlled\n // by x axis and corresponding dataZoom.\n x: -1,\n y: 1\n },\n data: [ ... ]\n }\n};\n</code></pre>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code>seriesLayoutBy</code> specifies whether the column or the row of <code>dataset</code> is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:</p>\n<ul>\n<li>'column': by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>'row'：the rows of <code>dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code>dataset</code>. <code>datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code>data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code>data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code>series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each colum is named as a "dimension".</p>\n<pre><code class=\"lang-js\">series: [{\n data: [\n // dimX dimY other dimensions ...\n [ 3.4, 4.5, 15, 43],\n [ 4.2, 2.3, 20, 91],\n [ 10.8, 9.5, 30, 18],\n [ 7.2, 8.8, 18, 57]\n ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, "dimX" and "dimY" correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> repectively.</li>\n<li>In <a href=\"#polar\">polar</a> "dimX" and "dimY" correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> repectively.</li>\n<li>Other dimensions are optional, which can be used in other place. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to viusal (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code>'category'</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n // Each item corresponds to each item in xAxis.data.\n data: [23, 44, 55, 19]\n // In fact, it is the simplification of the format below:\n // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between "value" and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code>'value'</code> or <code>'log'</code>):</p>\n<p> The value can be a <code>number</code> (like <code>12</code>) (can also be a number in a <code>string</code> format, like <code>'12'</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code>'category'</code>):</p>\n<p> The value should be the ordinal of the axis.data (based on <code>0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\"> xAxis: {\n type: 'category',\n data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n },\n yAxis: {\n type: 'category',\n data: ['a', 'b', 'm', 'n', 'p', 'q']\n },\n series: [{\n data: [\n // xAxis yAxis\n [ 0, 0, 2 ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n [ 'Thursday', 2, 1 ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n [ 2, 'p', 2 ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n [ 3, 3, 5 ]\n ]\n }]\n</code></pre>\n<p> There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code>'time'</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code>1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code>'2012-03'</code>, <code>'2012-03-01'</code>, <code>'2012-03-01 05'</code>, <code>'2012-03-01 05:06'</code>.</li>\n<li>separated by <code>"T"</code> or a space: <code>'2012-03-01T12:22:33.123'</code>, <code>'2012-03-01 12:22:33.123'</code>.</li>\n<li>timezone specified: <code>'2012-03-01T12:22:33Z'</code>, <code>'2012-03-01T12:22:33+8000'</code>, <code>'2012-03-01T12:22:33-05:00'</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code>'2012'</code>, <code>'2012-3-1'</code>, <code>'2012/3/1'</code>, <code>'2012/03/01'</code>,\n<code>'2009/6/12 2:00'</code>, <code>'2009/6/12 2:05:08'</code>, <code>'2009/6/12 2:05:08.123'</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code>new Date('2012-01-01')</code> is treated as a Jan 1st 2012 in UTC, while <code>new Date('2012-1-1')</code> and <code>new Date('2012/01/01')</code> are treated as Jan 1st 2012 in local timezone. In safari <code>new Date('2012-1-1')</code> is not supported.</li>\n<li>So if you intent to perform <code>new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code>echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code>value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n 12,\n 24,\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n 33\n]\n// Or\n[\n [12, 332],\n [24, 32],\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code>'-'</code> or <code>null</code> or <code>undefined</code> or <code>NaN</code> can be used to describe that a data item is not exists (ps：<em>not exist</em> does not means its value is <code>0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>The value of a single data item.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>single data symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n","default":4},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of single data symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"<p>The style of the text of single data point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"top"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>The style of the symbol of single data point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Bar color..</p>\n","default":"'auto'"},"barBorderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"barBorderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color..</p>\n","default":"'auto'"},"barBorderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"barBorderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-line.markPoint.data.x\">x</a>, <a href=\"#series-line.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-line.markPoint.data.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-line.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-line.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-line.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'maximum',\n type: 'max'\n }, \n {\n name: 'coordinate',\n coord: [10, 20]\n }, {\n name: 'fixed x position',\n yAxis: 10,\n x: '90%'\n }, \n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> maximum value.</li>\n<li><code>'max'</code> minimum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-line.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code>0</code> (xAxis, radiusAxis), <code>1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-line.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-line.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-line.markLine.data.0.x\">x</a>, <a href=\"#series-line.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-line.markLine.data.0.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-line.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-line.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-line.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code>xAxis</code> or <code>yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code>type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code>valueIndex</code>.</p>\n<pre><code>data: [\n {\n name: 'average line',\n // 'average', 'min', and 'max' are supported\n type: 'average'\n },\n {\n name: 'Horizontal line with Y value at 100',\n yAxis: 100\n },\n [\n {\n // Use the same name with starting and ending point\n name: 'Minimum to Maximum',\n type: 'min'\n },\n {\n type: 'max'\n }\n ],\n [\n {\n name: 'Markline between two points',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [{\n // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n yAxis: 'max',\n x: '90%'\n }, {\n type: 'max'\n }],\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-line.markArea.data.0.x\">x</a>, <a href=\"#series-line.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-line.markArea.data.0.coord\">coord</a>, which can be also set as <code>'min'</code>, <code>'max'</code>, <code>'average'</code> (e.g, <code>coord: [23, 'min']</code>, or <code>coord: ['average', 'max']</code>)。</p>\n</li>\n</ol>\n<ol>\n<li>Locate the point on the min value or max value of <code>series.data</code> using <a href=\"#series-line.markArea.data.0.type\">type</a>, where <a href=\"#series-line.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-line.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code>xAxis</code> or <code>yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n [\n {\n name: 'From average to max',\n type: 'average'\n },\n {\n type: 'max'\n }\n ],\n\n [\n {\n name: 'Mark area between two points in data coordiantes',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [\n {\n name: 'From 60 to 80',\n yAxis: 60\n },\n {\n yAxis: 80\n }\n ], [\n {\n name: 'Mark area covers all data'\n coord: ['min', 'min']\n },\n {\n coord: ['max', 'max']\n }\n ],\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in broken line graph.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in broken line graph, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"linear"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>bar chart</strong></p>\n<p>Bar chart shows different data through the height of a bar, which is used in <a href=\"#grid\">rectangular coordinate</a> with at least 1 category axis.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'bar'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n","default":0},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Bar color. defaults to acquire colors from global palette <a href=\"#color\">option.color</a> .</p>\n","default":"'auto'"},"barBorderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"barBorderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"barBorderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>barBorderRadius: 5, // consistently set the size of 4 rounded corners\nbarBorderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color..</p>\n","default":"'auto'"},"barBorderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"barBorderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"stack":{"type":["string"],"description":"<p>Name of stack. On the same category axis, the series with the same <code>stack</code> name would be put on top of each other.</p>\n","default":null},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"barWidth":{"type":["number"],"description":"<p>The width of the bar. Adaptive when not specified.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code>'bar'</code> series. This attribute should be set on the last <code>'bar'</code> series in the coodinate system, then it will be adopted by all <code>'bar'</code> series in the coordinate system.</p>\n","default":null},"barMaxWidth":{"type":["number"],"description":"<p>The maximum width of the bar. Adaptive when not specified.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code>'bar'</code> series. This attribute should be set on the last <code>'bar'</code> series in the coodinate system, then it will be adopted by all <code>'bar'</code> series in the coordinate system.</p>\n","default":null},"barMinHeight":{"type":["number"],"description":"<p>The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.</p>\n","default":0},"barGap":{"type":["string"],"description":"<p>The gap between bars between different series, is a percent value like <code>'30%'</code>, which means <code>30%</code> of the bar width.</p>\n<p>Set barGap as <code>'-100%'</code> can overlap bars that belong to different series, which is useful when making a series of bar be background.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code>'bar'</code> series. This attribute should be set on the last <code>'bar'</code> series in the coodinate system, then it will be adopted by all <code>'bar'</code> series in the coordinate system.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/barGrid-barGap&reset=1&edit=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n","default":"30%"},"barCategoryGap":{"type":["string"],"description":"<p>The bar gap of a single series, defaults to be <code>20%</code> of the category gap, can be set as a fixed value.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code>'bar'</code> series. This attribute should be set on the last <code>'bar'</code> series in the coodinate system, then it will be adopted by all <code>'bar'</code> series in the coordinate system.</p>\n","default":"'20%'"},"large":{"type":["boolean"],"description":"<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code>largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can't be customized any more.</p>\n","default":false},"largeThreshold":{"type":["number"],"description":"<p>The threshold enabling the drawing optimization.</p>\n","default":400},"progressive":{"type":["number"],"description":"<p><code>progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n","default":5000},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, "progressive rendering" is enabled.</p>\n","default":3000},"progressiveChunkMode":{"type":["string"],"description":"<p>Chunk approach, optional values:</p>\n<ul>\n<li><code>'sequential'</code>: slice data by data index.</li>\n<li><code>'mod'</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n","default":"mod"},"dimensions":{"type":["Array"],"description":"<p><code>dimensions</code> can be used to define dimension info for <code>series.data</code> or <code>dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code>dimensions</code> here. But if <code>dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code>dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // Specify name for each dimesions, which will be displayed in tooltip.\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: [\n null, // If you do not intent to defined this dimension, use null is fine.\n {type: 'ordinal'}, // Specify type of this dimension.\n // 'ordinal' is always used in string.\n // If type is not specified, echarts will guess type by data.\n {name: 'good', type: 'number'},\n 'bad' // Equals to {name: 'bad'}.\n ]\n}\n</code></pre>\n<p>Each data item of <code>dimensions</code> can be:</p>\n<ul>\n<li><code>string</code>, for example, <code>'someName'</code>, which equals to <code>{name: 'someName'}</code>.</li>\n<li><code>Object</code>, where the attributes can be:<ul>\n<li>name: <code>string</code>.</li>\n<li>type: <code>string</code>, supports:<ul>\n<li><code>number</code></li>\n<li><code>float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code>int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code>ordinal</code>, discrete value, which represents string generally.</li>\n<li><code>time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code>string</code>, generally used in tooltip for dimension display. If not specified, use <code>name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code>dimensions</code> is specified, the default <code>tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code>tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code>data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // Each column is called a dimension.\n // There are five dimensions: 0, 1, 2, 3, 4。\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n encode: {\n x: [3, 1, 5], // Dimension 3, 1, 5 is mapped to x axis.\n y: 2, // Dimension 2 is mapped to y axis.\n tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n }\n }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code>encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n encode: {\n x: 'date',\n y: ['open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" target=\"_blank\">example</a> for <code>encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code>encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n xAxis: {},\n yAxis: {},\n dataZoom: [{\n xAxisIndex: 0\n }, {\n yAxisIndex: 0\n }],\n series: {\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'circle',\n shape: {\n cx: 100, // x position is always 100\n cy: api.coord([0, api.value(0)])[1],\n r: 30\n },\n style: {\n fill: 'blue'\n }\n };\n },\n encode: {\n // Then the series will not be controlled\n // by x axis and corresponding dataZoom.\n x: -1,\n y: 1\n },\n data: [ ... ]\n }\n};\n</code></pre>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code>seriesLayoutBy</code> specifies whether the column or the row of <code>dataset</code> is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:</p>\n<ul>\n<li>'column': by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>'row'：the rows of <code>dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code>dataset</code>. <code>datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code>data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code>data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code>series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each colum is named as a "dimension".</p>\n<pre><code class=\"lang-js\">series: [{\n data: [\n // dimX dimY other dimensions ...\n [ 3.4, 4.5, 15, 43],\n [ 4.2, 2.3, 20, 91],\n [ 10.8, 9.5, 30, 18],\n [ 7.2, 8.8, 18, 57]\n ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, "dimX" and "dimY" correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> repectively.</li>\n<li>In <a href=\"#polar\">polar</a> "dimX" and "dimY" correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> repectively.</li>\n<li>Other dimensions are optional, which can be used in other place. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to viusal (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code>'category'</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n // Each item corresponds to each item in xAxis.data.\n data: [23, 44, 55, 19]\n // In fact, it is the simplification of the format below:\n // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between "value" and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code>'value'</code> or <code>'log'</code>):</p>\n<p> The value can be a <code>number</code> (like <code>12</code>) (can also be a number in a <code>string</code> format, like <code>'12'</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code>'category'</code>):</p>\n<p> The value should be the ordinal of the axis.data (based on <code>0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\"> xAxis: {\n type: 'category',\n data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n },\n yAxis: {\n type: 'category',\n data: ['a', 'b', 'm', 'n', 'p', 'q']\n },\n series: [{\n data: [\n // xAxis yAxis\n [ 0, 0, 2 ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n [ 'Thursday', 2, 1 ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n [ 2, 'p', 2 ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n [ 3, 3, 5 ]\n ]\n }]\n</code></pre>\n<p> There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code>'time'</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code>1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code>'2012-03'</code>, <code>'2012-03-01'</code>, <code>'2012-03-01 05'</code>, <code>'2012-03-01 05:06'</code>.</li>\n<li>separated by <code>"T"</code> or a space: <code>'2012-03-01T12:22:33.123'</code>, <code>'2012-03-01 12:22:33.123'</code>.</li>\n<li>timezone specified: <code>'2012-03-01T12:22:33Z'</code>, <code>'2012-03-01T12:22:33+8000'</code>, <code>'2012-03-01T12:22:33-05:00'</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code>'2012'</code>, <code>'2012-3-1'</code>, <code>'2012/3/1'</code>, <code>'2012/03/01'</code>,\n<code>'2009/6/12 2:00'</code>, <code>'2009/6/12 2:05:08'</code>, <code>'2009/6/12 2:05:08.123'</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code>new Date('2012-01-01')</code> is treated as a Jan 1st 2012 in UTC, while <code>new Date('2012-1-1')</code> and <code>new Date('2012/01/01')</code> are treated as Jan 1st 2012 in local timezone. In safari <code>new Date('2012-1-1')</code> is not supported.</li>\n<li>So if you intent to perform <code>new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code>echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code>value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n 12,\n 24,\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n 33\n]\n// Or\n[\n [12, 332],\n [24, 32],\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code>'-'</code> or <code>null</code> or <code>undefined</code> or <code>NaN</code> can be used to describe that a data item is not exists (ps：<em>not exist</em> does not means its value is <code>0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>The value of a single data item.</p>\n"},"label":{"type":["Object"],"description":"<p>The style setting of the text label in a single bar.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color..</p>\n","default":"'auto'"},"barBorderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"barBorderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"barBorderRadius":{"type":["number","Array"],"description":"<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>barBorderRadius: 5, // consistently set the size of 4 rounded corners\nbarBorderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color..</p>\n","default":"'auto'"},"barBorderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"barBorderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-bar.markPoint.data.x\">x</a>, <a href=\"#series-bar.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-bar.markPoint.data.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-bar.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-bar.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-bar.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'maximum',\n type: 'max'\n }, \n {\n name: 'coordinate',\n coord: [10, 20]\n }, {\n name: 'fixed x position',\n yAxis: 10,\n x: '90%'\n }, \n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> maximum value.</li>\n<li><code>'max'</code> minimum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-bar.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code>0</code> (xAxis, radiusAxis), <code>1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-bar.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-bar.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-bar.markLine.data.0.x\">x</a>, <a href=\"#series-bar.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-bar.markLine.data.0.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-bar.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-bar.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-bar.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code>xAxis</code> or <code>yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code>type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code>valueIndex</code>.</p>\n<pre><code>data: [\n {\n name: 'average line',\n // 'average', 'min', and 'max' are supported\n type: 'average'\n },\n {\n name: 'Horizontal line with Y value at 100',\n yAxis: 100\n },\n [\n {\n // Use the same name with starting and ending point\n name: 'Minimum to Maximum',\n type: 'min'\n },\n {\n type: 'max'\n }\n ],\n [\n {\n name: 'Markline between two points',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [{\n // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n yAxis: 'max',\n x: '90%'\n }, {\n type: 'max'\n }],\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-bar.markArea.data.0.x\">x</a>, <a href=\"#series-bar.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-bar.markArea.data.0.coord\">coord</a>, which can be also set as <code>'min'</code>, <code>'max'</code>, <code>'average'</code> (e.g, <code>coord: [23, 'min']</code>, or <code>coord: ['average', 'max']</code>)。</p>\n</li>\n</ol>\n<ol>\n<li>Locate the point on the min value or max value of <code>series.data</code> using <a href=\"#series-bar.markArea.data.0.type\">type</a>, where <a href=\"#series-bar.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-bar.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code>xAxis</code> or <code>yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n [\n {\n name: 'From average to max',\n type: 'average'\n },\n {\n type: 'max'\n }\n ],\n\n [\n {\n name: 'Mark area between two points in data coordiantes',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [\n {\n name: 'From 60 to 80',\n yAxis: 60\n },\n {\n yAxis: 80\n }\n ], [\n {\n name: 'Mark area covers all data'\n coord: ['min', 'min']\n },\n {\n coord: ['max', 'max']\n }\n ],\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in bar chart.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in bar chart, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>pie chart</strong></p>\n<p>The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.</p>\n<p><strong>Tip:</strong> The pie chart is more suitable for illustrating the numerical proportion. If you just to present the numerical differences of various categories, the <a href=\"bar\" target=\"_blank\">bar graph</a> chart is more suggested. Because compared to tiny length difference, people is less sensitive to the minor radian difference. Otherwise, it can also be shown as Nightingale chart by using the <a href=\"#series-pie.roseType\">roseType</a> to distinguish different data through radius.</p>\n<p><strong> The below example shows a customized Nightingale chart: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-custom&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'pie'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable the zoom animation effects when hovering sectors.</p>\n","default":true},"hoverOffset":{"type":["number"],"description":"<p>The offset distance of hovered sector.</p>\n","default":10},"selectedMode":{"type":["boolean","string"],"description":"<p>Selected mode of pie. It is enabled by default, and you may set it to be <code>false</code> to disabled it.</p>\n<p>Besides, it can be set to <code>'single'</code> or <code>'multiple'</code>, for single selection and multiple selection.</p>\n","default":false},"selectedOffset":{"type":["number"],"description":"<p>The offset distance of selected sector.</p>\n","default":10},"clockwise":{"type":["boolean"],"description":"<p>Whether the layout of sectors of pie chart is clockwise.</p>\n","default":true},"startAngle":{"type":["number"],"description":"<p>The start angle, which range is [0, 360].</p>\n","default":90},"minAngle":{"type":["number"],"description":"<p>The minimum angle of sector (0 ~ 360). It prevents some sector from being too small when value is small, which will affect user interaction.</p>\n","default":0},"minShowLabelAngle":{"type":["number"],"description":"<p>If a sector is less than this angle (0 ~ 360), label and labelLine will not be displayed.</p>\n","default":0},"roseType":{"type":["boolean","string"],"description":"<p>Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:</p>\n<ul>\n<li><code>'radius'</code> Use central angle to show the percentage of data, radius to show data size.</li>\n<li><code>'area'</code> All the sectors will share the same central angle, the data size is shown only through radiuses.</li>\n</ul>\n","default":false},"avoidLabelOverlap":{"type":["boolean"],"description":"<p>Whether to enable the strategy to avoid labels overlap. Defaults to be enabled, which will move the label positions in the case of labels overlapping</p>\n","default":true},"stillShowZeroSum":{"type":["boolean"],"description":"<p>Whether to show sector when all data are zero.</p>\n","default":true},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"label":{"type":["Object"],"description":"<p>Text label of pie chart, to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"<p>The position of label.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code>'outside'</code></p>\n<p> Outside of sectors of pie chart, which relates to corresponding sector through <a href=\"#series-pie.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Inside the sectors of pie chart.</p>\n</li>\n<li><p><code>'inner'</code> is the same with <code>'inside'</code>.</p>\n</li>\n<li><p><code>'center'</code></p>\n<p> In the center of pie chart. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut\" target=\"_blank\">pie-doughnut example</a></p>\n</li>\n</ul>\n","default":"'outside'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // percentage\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"rotate":{"type":["boolean","number"],"description":"<p>Label rotation.</p>\n<ul>\n<li>If <code>true</code>, layout label radically.</li>\n<li>If <code>number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The style of visual guide line. Will show when <a href=\"#series-pie.label.position\">label position</a> is set as <code>'outside'</code>.</p>\n<p>The style of visual guide line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the visual guide ine.</p>\n"},"length":{"type":["number"],"description":"<p>The length of the first segment of visual guide line.</p>\n"},"length2":{"type":["number"],"description":"<p>The length of the second segment of visual guide line.</p>\n"},"smooth":{"type":["boolean","number"],"description":"<p>Whether to smooth the visual guide line. It defaults to be <code>false</code> and can be set as <code>true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) => Color\n</code></pre>\n<p>Input parameters are <code>seriesIndex</code>, <code>dataIndex</code>, <code>data</code>, <code>value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // percentage\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"rotate":{"type":["boolean","number"],"description":"<p>Label rotation.</p>\n<ul>\n<li>If <code>true</code>, layout label radically.</li>\n<li>If <code>number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The style of visual guide line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the visual guide ine.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"center":{"type":["Array"],"description":"<p>Center position of Pie chart, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: ['50%', '50%']\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"<p>Radius of Pie chart. Value can be:</p>\n<ul>\n<li><code>number</code>: Specify outside radius directly.</li>\n<li><code>string</code>: For example, <code>'20%'</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</li>\n<li><code>Array.<number|string></code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</li>\n</ul>\n<p>You can set a large inner radius for a Donut chart.</p>\n","default":"[0, '75%']"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code>seriesLayoutBy</code> specifies whether the column or the row of <code>dataset</code> is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:</p>\n<ul>\n<li>'column': by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>'row'：the rows of <code>dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code>dataset</code>. <code>datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each arrary item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n // name of date item\n name: 'data1',\n // value of date item is 8\n value: 10\n}, {\n name: 'data2',\n value: 20\n}]\n</code></pre>\n<p>Each data item can be further custerized:</p>\n<pre><code class=\"lang-js\">[{\n name: 'data1',\n value: 10\n}, {\n // name of data item\n name: 'data2',\n value : 56,\n // user-defined label format that only useful for this data item\n label: {},\n // user-defined special itemStyle that only useful for this data item\n itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>Data value.</p>\n"},"selected":{"type":["boolean"],"description":"<p>Whether the data item is selected.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>The label configuration of a single sector.</p>\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"<p>The position of label.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code>'outside'</code></p>\n<p> Outside of sectors of pie chart, which relates to corresponding sector through <a href=\"#series-pie.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Inside the sectors of pie chart.</p>\n</li>\n<li><p><code>'inner'</code> is the same with <code>'inside'</code>.</p>\n</li>\n<li><p><code>'center'</code></p>\n<p> In the center of pie chart. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut\" target=\"_blank\">pie-doughnut example</a></p>\n</li>\n</ul>\n","default":"'outside'"},"rotate":{"type":["boolean","number"],"description":"<p>Label rotation.</p>\n<ul>\n<li>If <code>true</code>, layout label radically.</li>\n<li>If <code>number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The style of visual guide line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the visual guide ine.</p>\n"},"length":{"type":["number"],"description":"<p>The length of the first segment of visual guide line.</p>\n"},"length2":{"type":["number"],"description":"<p>The length of the second segment of visual guide line.</p>\n"},"smooth":{"type":["boolean","number"],"description":"<p>Whether to smooth the visual guide line. It defaults to be <code>false</code> and can be set as <code>true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n","default":false},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"rotate":{"type":["boolean","number"],"description":"<p>Label rotation.</p>\n<ul>\n<li>If <code>true</code>, layout label radically.</li>\n<li>If <code>number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n","default":null},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The style of visual guide line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the visual guide ine.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-pie.markPoint.data.x\">x</a>, <a href=\"#series-pie.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-pie.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-pie.markLine.data.0.x\">x</a>, <a href=\"#series-pie.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-pie.markArea.data.0.x\">x</a>, <a href=\"#series-pie.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animationType":{"type":["string"],"description":"<p>Initial animation type.</p>\n<ul>\n<li><code>'expansion'</code> Default expansion animation.</li>\n<li><code>'scale'</code> Scale animation. You can use it with <code>animationEasing='elasticOut'</code> to have popup effect.</li>\n</ul>\n","default":"'expansion'"},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p>Scatter (bubble) chart . The scatter chart in <a href=\"#grid\">rectangular coordinate</a> could be used to present the relation between <code>x</code> and <code>y</code>. If data have multiple dimensions, the values of the other dimensions can be visualized through <a href=\"#series-scatter.symbol\">symbol</a> with various sizes and colors, which becomes a bubble chart. These can be done by using with <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>It could be used with <a href=\"#grid\">rectangular coordinate</a> and <a href=\"#polar\">polar coordinate</a> and <a href=\"#geo\">geographical coordinate</a>.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'scatter'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'polar'</code></p>\n<p> Use polar coordinates, with <a href=\"#series-bar.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'geo'</code></p>\n<p> Use geographic coordinate, with <a href=\"#series-bar.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable the animation effect when mouse is on the symbol.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-scatter.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":10},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"large":{"type":["boolean"],"description":"<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code>largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can't be customized any more.</p>\n","default":false},"largeThreshold":{"type":["number"],"description":"<p>The threshold enabling the drawing optimization.</p>\n","default":2000},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) => Color\n</code></pre>\n<p>Input parameters are <code>seriesIndex</code>, <code>dataIndex</code>, <code>data</code>, <code>value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"progressive":{"type":["number"],"description":"<p><code>progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n","default":400},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, "progressive rendering" is enabled.</p>\n","default":3000},"dimensions":{"type":["Array"],"description":"<p><code>dimensions</code> can be used to define dimension info for <code>series.data</code> or <code>dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code>dimensions</code> here. But if <code>dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code>dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // Specify name for each dimesions, which will be displayed in tooltip.\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: [\n null, // If you do not intent to defined this dimension, use null is fine.\n {type: 'ordinal'}, // Specify type of this dimension.\n // 'ordinal' is always used in string.\n // If type is not specified, echarts will guess type by data.\n {name: 'good', type: 'number'},\n 'bad' // Equals to {name: 'bad'}.\n ]\n}\n</code></pre>\n<p>Each data item of <code>dimensions</code> can be:</p>\n<ul>\n<li><code>string</code>, for example, <code>'someName'</code>, which equals to <code>{name: 'someName'}</code>.</li>\n<li><code>Object</code>, where the attributes can be:<ul>\n<li>name: <code>string</code>.</li>\n<li>type: <code>string</code>, supports:<ul>\n<li><code>number</code></li>\n<li><code>float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code>int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code>ordinal</code>, discrete value, which represents string generally.</li>\n<li><code>time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code>string</code>, generally used in tooltip for dimension display. If not specified, use <code>name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code>dimensions</code> is specified, the default <code>tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code>tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code>data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // Each column is called a dimension.\n // There are five dimensions: 0, 1, 2, 3, 4。\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n encode: {\n x: [3, 1, 5], // Dimension 3, 1, 5 is mapped to x axis.\n y: 2, // Dimension 2 is mapped to y axis.\n tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n }\n }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code>encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n encode: {\n x: 'date',\n y: ['open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" target=\"_blank\">example</a> for <code>encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code>encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n xAxis: {},\n yAxis: {},\n dataZoom: [{\n xAxisIndex: 0\n }, {\n yAxisIndex: 0\n }],\n series: {\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'circle',\n shape: {\n cx: 100, // x position is always 100\n cy: api.coord([0, api.value(0)])[1],\n r: 30\n },\n style: {\n fill: 'blue'\n }\n };\n },\n encode: {\n // Then the series will not be controlled\n // by x axis and corresponding dataZoom.\n x: -1,\n y: 1\n },\n data: [ ... ]\n }\n};\n</code></pre>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code>seriesLayoutBy</code> specifies whether the column or the row of <code>dataset</code> is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:</p>\n<ul>\n<li>'column': by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>'row'：the rows of <code>dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code>dataset</code>. <code>datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code>data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code>data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code>series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each colum is named as a "dimension".</p>\n<pre><code class=\"lang-js\">series: [{\n data: [\n // dimX dimY other dimensions ...\n [ 3.4, 4.5, 15, 43],\n [ 4.2, 2.3, 20, 91],\n [ 10.8, 9.5, 30, 18],\n [ 7.2, 8.8, 18, 57]\n ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, "dimX" and "dimY" correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> repectively.</li>\n<li>In <a href=\"#polar\">polar</a> "dimX" and "dimY" correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> repectively.</li>\n<li>Other dimensions are optional, which can be used in other place. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to viusal (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code>'category'</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n // Each item corresponds to each item in xAxis.data.\n data: [23, 44, 55, 19]\n // In fact, it is the simplification of the format below:\n // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between "value" and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code>'value'</code> or <code>'log'</code>):</p>\n<p> The value can be a <code>number</code> (like <code>12</code>) (can also be a number in a <code>string</code> format, like <code>'12'</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code>'category'</code>):</p>\n<p> The value should be the ordinal of the axis.data (based on <code>0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\"> xAxis: {\n type: 'category',\n data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n },\n yAxis: {\n type: 'category',\n data: ['a', 'b', 'm', 'n', 'p', 'q']\n },\n series: [{\n data: [\n // xAxis yAxis\n [ 0, 0, 2 ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n [ 'Thursday', 2, 1 ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n [ 2, 'p', 2 ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n [ 3, 3, 5 ]\n ]\n }]\n</code></pre>\n<p> There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code>'time'</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code>1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code>'2012-03'</code>, <code>'2012-03-01'</code>, <code>'2012-03-01 05'</code>, <code>'2012-03-01 05:06'</code>.</li>\n<li>separated by <code>"T"</code> or a space: <code>'2012-03-01T12:22:33.123'</code>, <code>'2012-03-01 12:22:33.123'</code>.</li>\n<li>timezone specified: <code>'2012-03-01T12:22:33Z'</code>, <code>'2012-03-01T12:22:33+8000'</code>, <code>'2012-03-01T12:22:33-05:00'</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code>'2012'</code>, <code>'2012-3-1'</code>, <code>'2012/3/1'</code>, <code>'2012/03/01'</code>,\n<code>'2009/6/12 2:00'</code>, <code>'2009/6/12 2:05:08'</code>, <code>'2009/6/12 2:05:08.123'</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code>new Date('2012-01-01')</code> is treated as a Jan 1st 2012 in UTC, while <code>new Date('2012-1-1')</code> and <code>new Date('2012/01/01')</code> are treated as Jan 1st 2012 in local timezone. In safari <code>new Date('2012-1-1')</code> is not supported.</li>\n<li>So if you intent to perform <code>new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code>echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code>value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n 12,\n 24,\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n 33\n]\n// Or\n[\n [12, 332],\n [24, 32],\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code>'-'</code> or <code>null</code> or <code>undefined</code> or <code>NaN</code> can be used to describe that a data item is not exists (ps：<em>not exist</em> does not means its value is <code>0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>the name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>the value of data item.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>single data symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of single data symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>the style setting about single data point(bubble).</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-scatter.markPoint.data.x\">x</a>, <a href=\"#series-scatter.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-scatter.markPoint.data.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-scatter.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-scatter.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-scatter.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'maximum',\n type: 'max'\n }, \n {\n name: 'coordinate',\n coord: [10, 20]\n }, {\n name: 'fixed x position',\n yAxis: 10,\n x: '90%'\n }, \n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> maximum value.</li>\n<li><code>'max'</code> minimum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-scatter.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code>0</code> (xAxis, radiusAxis), <code>1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-scatter.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-scatter.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-scatter.markLine.data.0.x\">x</a>, <a href=\"#series-scatter.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-scatter.markLine.data.0.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-scatter.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-scatter.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-scatter.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code>xAxis</code> or <code>yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code>type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code>valueIndex</code>.</p>\n<pre><code>data: [\n {\n name: 'average line',\n // 'average', 'min', and 'max' are supported\n type: 'average'\n },\n {\n name: 'Horizontal line with Y value at 100',\n yAxis: 100\n },\n [\n {\n // Use the same name with starting and ending point\n name: 'Minimum to Maximum',\n type: 'min'\n },\n {\n type: 'max'\n }\n ],\n [\n {\n name: 'Markline between two points',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [{\n // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n yAxis: 'max',\n x: '90%'\n }, {\n type: 'max'\n }],\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-scatter.markArea.data.0.x\">x</a>, <a href=\"#series-scatter.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-scatter.markArea.data.0.coord\">coord</a>, which can be also set as <code>'min'</code>, <code>'max'</code>, <code>'average'</code> (e.g, <code>coord: [23, 'min']</code>, or <code>coord: ['average', 'max']</code>)。</p>\n</li>\n</ol>\n<ol>\n<li>Locate the point on the min value or max value of <code>series.data</code> using <a href=\"#series-scatter.markArea.data.0.type\">type</a>, where <a href=\"#series-scatter.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-scatter.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code>xAxis</code> or <code>yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n [\n {\n name: 'From average to max',\n type: 'average'\n },\n {\n type: 'max'\n }\n ],\n\n [\n {\n name: 'Mark area between two points in data coordiantes',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [\n {\n name: 'From 60 to 80',\n yAxis: 60\n },\n {\n yAxis: 80\n }\n ], [\n {\n name: 'Mark area covers all data'\n coord: ['min', 'min']\n },\n {\n coord: ['max', 'max']\n }\n ],\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in scatter chart.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in scatter chart, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p>The scatter (bubble) graph with ripple animation. The special animation effect can visually highlights some data.</p>\n<p><strong>Tip:</strong> The effects of map was achieved through markPoint in ECharts 2.x. However, in ECharts 3, effectScatter on geographic coordinate is recommended for achieving that effects of map.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'effectScatter'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"effectType":{"type":["string"],"description":"<p>Type of effect. Only ripple effect of <code>'ripple'</code> is supported currently.</p>\n","default":"'ripple'"},"showEffectOn":{"type":["string"],"description":"<p>When to show the effect.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code>'render'</code> Show the effect when rendering is done.</li>\n<li><code>'emphasis'</code> Show the effect when it is highlight (hover).</li>\n</ul>\n","default":"'render'"},"rippleEffect":{"type":["Object"],"description":"<p>Related configurations about ripple effect.</p>\n","properties":{"period":{"type":["number"],"description":"<p>The period duration of animation, in seconds.</p>\n","default":4},"scale":{"type":["number"],"description":"<p>The maximum zooming scale of ripples in animation.</p>\n","default":2.5},"brushType":{"type":["string"],"description":"<p>The brush type for ripples. options: <code>'stroke'</code> and <code>'fill'</code>.</p>\n","default":"'fill'"}}},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-bar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-bar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'polar'</code></p>\n<p> Use polar coordinates, with <a href=\"#series-bar.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'geo'</code></p>\n<p> Use geographic coordinate, with <a href=\"#series-bar.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n","default":10},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) => Color\n</code></pre>\n<p>Input parameters are <code>seriesIndex</code>, <code>dataIndex</code>, <code>data</code>, <code>value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color","Function"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) => Color\n</code></pre>\n<p>Input parameters are <code>seriesIndex</code>, <code>dataIndex</code>, <code>data</code>, <code>value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code>seriesLayoutBy</code> specifies whether the column or the row of <code>dataset</code> is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:</p>\n<ul>\n<li>'column': by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>'row'：the rows of <code>dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code>dataset</code>. <code>datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"dimensions":{"type":["Array"],"description":"<p><code>dimensions</code> can be used to define dimension info for <code>series.data</code> or <code>dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code>dimensions</code> here. But if <code>dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code>dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // Specify name for each dimesions, which will be displayed in tooltip.\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: [\n null, // If you do not intent to defined this dimension, use null is fine.\n {type: 'ordinal'}, // Specify type of this dimension.\n // 'ordinal' is always used in string.\n // If type is not specified, echarts will guess type by data.\n {name: 'good', type: 'number'},\n 'bad' // Equals to {name: 'bad'}.\n ]\n}\n</code></pre>\n<p>Each data item of <code>dimensions</code> can be:</p>\n<ul>\n<li><code>string</code>, for example, <code>'someName'</code>, which equals to <code>{name: 'someName'}</code>.</li>\n<li><code>Object</code>, where the attributes can be:<ul>\n<li>name: <code>string</code>.</li>\n<li>type: <code>string</code>, supports:<ul>\n<li><code>number</code></li>\n<li><code>float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code>int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code>ordinal</code>, discrete value, which represents string generally.</li>\n<li><code>time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code>string</code>, generally used in tooltip for dimension display. If not specified, use <code>name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code>dimensions</code> is specified, the default <code>tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code>tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code>data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // Each column is called a dimension.\n // There are five dimensions: 0, 1, 2, 3, 4。\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n encode: {\n x: [3, 1, 5], // Dimension 3, 1, 5 is mapped to x axis.\n y: 2, // Dimension 2 is mapped to y axis.\n tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n }\n }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code>encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n encode: {\n x: 'date',\n y: ['open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" target=\"_blank\">example</a> for <code>encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code>encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n xAxis: {},\n yAxis: {},\n dataZoom: [{\n xAxisIndex: 0\n }, {\n yAxisIndex: 0\n }],\n series: {\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'circle',\n shape: {\n cx: 100, // x position is always 100\n cy: api.coord([0, api.value(0)])[1],\n r: 30\n },\n style: {\n fill: 'blue'\n }\n };\n },\n encode: {\n // Then the series will not be controlled\n // by x axis and corresponding dataZoom.\n x: -1,\n y: 1\n },\n data: [ ... ]\n }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code>data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code>data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code>series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each colum is named as a "dimension".</p>\n<pre><code class=\"lang-js\">series: [{\n data: [\n // dimX dimY other dimensions ...\n [ 3.4, 4.5, 15, 43],\n [ 4.2, 2.3, 20, 91],\n [ 10.8, 9.5, 30, 18],\n [ 7.2, 8.8, 18, 57]\n ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, "dimX" and "dimY" correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> repectively.</li>\n<li>In <a href=\"#polar\">polar</a> "dimX" and "dimY" correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> repectively.</li>\n<li>Other dimensions are optional, which can be used in other place. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to viusal (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code>'category'</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n // Each item corresponds to each item in xAxis.data.\n data: [23, 44, 55, 19]\n // In fact, it is the simplification of the format below:\n // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between "value" and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code>'value'</code> or <code>'log'</code>):</p>\n<p> The value can be a <code>number</code> (like <code>12</code>) (can also be a number in a <code>string</code> format, like <code>'12'</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code>'category'</code>):</p>\n<p> The value should be the ordinal of the axis.data (based on <code>0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\"> xAxis: {\n type: 'category',\n data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n },\n yAxis: {\n type: 'category',\n data: ['a', 'b', 'm', 'n', 'p', 'q']\n },\n series: [{\n data: [\n // xAxis yAxis\n [ 0, 0, 2 ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n [ 'Thursday', 2, 1 ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n [ 2, 'p', 2 ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n [ 3, 3, 5 ]\n ]\n }]\n</code></pre>\n<p> There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code>'time'</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code>1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code>'2012-03'</code>, <code>'2012-03-01'</code>, <code>'2012-03-01 05'</code>, <code>'2012-03-01 05:06'</code>.</li>\n<li>separated by <code>"T"</code> or a space: <code>'2012-03-01T12:22:33.123'</code>, <code>'2012-03-01 12:22:33.123'</code>.</li>\n<li>timezone specified: <code>'2012-03-01T12:22:33Z'</code>, <code>'2012-03-01T12:22:33+8000'</code>, <code>'2012-03-01T12:22:33-05:00'</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code>'2012'</code>, <code>'2012-3-1'</code>, <code>'2012/3/1'</code>, <code>'2012/03/01'</code>,\n<code>'2009/6/12 2:00'</code>, <code>'2009/6/12 2:05:08'</code>, <code>'2009/6/12 2:05:08.123'</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code>new Date('2012-01-01')</code> is treated as a Jan 1st 2012 in UTC, while <code>new Date('2012-1-1')</code> and <code>new Date('2012/01/01')</code> are treated as Jan 1st 2012 in local timezone. In safari <code>new Date('2012-1-1')</code> is not supported.</li>\n<li>So if you intent to perform <code>new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code>echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code>value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n 12,\n 24,\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n 33\n]\n// Or\n[\n [12, 332],\n [24, 32],\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code>'-'</code> or <code>null</code> or <code>undefined</code> or <code>NaN</code> can be used to describe that a data item is not exists (ps：<em>not exist</em> does not means its value is <code>0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"symbol":{"type":["string"],"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>single data symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n","default":4},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of single data symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-effectScatter.markPoint.data.x\">x</a>, <a href=\"#series-effectScatter.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-effectScatter.markPoint.data.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-effectScatter.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-effectScatter.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-effectScatter.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'maximum',\n type: 'max'\n }, \n {\n name: 'coordinate',\n coord: [10, 20]\n }, {\n name: 'fixed x position',\n yAxis: 10,\n x: '90%'\n }, \n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> maximum value.</li>\n<li><code>'max'</code> minimum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-effectScatter.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code>0</code> (xAxis, radiusAxis), <code>1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-effectScatter.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-effectScatter.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-effectScatter.markLine.data.0.x\">x</a>, <a href=\"#series-effectScatter.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-effectScatter.markLine.data.0.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-effectScatter.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-effectScatter.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-effectScatter.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code>xAxis</code> or <code>yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code>type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code>valueIndex</code>.</p>\n<pre><code>data: [\n {\n name: 'average line',\n // 'average', 'min', and 'max' are supported\n type: 'average'\n },\n {\n name: 'Horizontal line with Y value at 100',\n yAxis: 100\n },\n [\n {\n // Use the same name with starting and ending point\n name: 'Minimum to Maximum',\n type: 'min'\n },\n {\n type: 'max'\n }\n ],\n [\n {\n name: 'Markline between two points',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [{\n // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n yAxis: 'max',\n x: '90%'\n }, {\n type: 'max'\n }],\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-effectScatter.markArea.data.0.x\">x</a>, <a href=\"#series-effectScatter.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-effectScatter.markArea.data.0.coord\">coord</a>, which can be also set as <code>'min'</code>, <code>'max'</code>, <code>'average'</code> (e.g, <code>coord: [23, 'min']</code>, or <code>coord: ['average', 'max']</code>)。</p>\n</li>\n</ol>\n<ol>\n<li>Locate the point on the min value or max value of <code>series.data</code> using <a href=\"#series-effectScatter.markArea.data.0.type\">type</a>, where <a href=\"#series-effectScatter.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-effectScatter.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code>xAxis</code> or <code>yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n [\n {\n name: 'From average to max',\n type: 'average'\n },\n {\n type: 'max'\n }\n ],\n\n [\n {\n name: 'Mark area between two points in data coordiantes',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [\n {\n name: 'From 60 to 80',\n yAxis: 60\n },\n {\n yAxis: 80\n }\n ], [\n {\n name: 'Mark area covers all data'\n coord: ['min', 'min']\n },\n {\n coord: ['max', 'max']\n }\n ],\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>radar chart</strong></p>\n<p>Radar chart is mainly used to show multi-variable data, such as the analysis of a football player's varied attributes. It relies <a href=\"#radar\">radar</a> component.</p>\n<p>Here is the example of AQI data which is presented in radar chart.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=radar-aqi&edit=1&reset=1\" width=\"600\" height=\"500\" ></iframe>\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'radar'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"radarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#radar\">radar</a> component that radar chart uses.</p>\n"},"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-radar.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-radar.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":4},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'top'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Item style of the inflection point of the lines.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) => Color\n</code></pre>\n<p>Input parameters are <code>seriesIndex</code>, <code>dataIndex</code>, <code>data</code>, <code>value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>Line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"<p>Area filling style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>The data in radar chart is multi-variable (dimension). Here is an example:</p>\n<pre><code class=\"lang-js\">data : [\n {\n value : [4300, 10000, 28000, 35000, 50000, 19000],\n name : 'Allocated Budget'\n },\n {\n value : [5000, 14000, 28000, 31000, 42000, 21000],\n name : 'Actual Spending'\n }\n]\n</code></pre>\n<p>Among them, <code>value</code> item array contains data that is corresponding to <a href=\"#radar.indicator\">radar.indicator</a>.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Data item name</p>\n"},"value":{"type":["number"],"description":"<p>Numerical value of a single data item.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of single data.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>single data symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n","default":4},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of single data symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"label":{"type":["Object"],"description":"<p>Style setting of the text on single inflection point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"top"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style setting of the symbol on single inflection point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Bar color..</p>\n","default":"'auto'"},"barBorderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"barBorderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>Line style of a single item.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"<p>Area filling style of a single item.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"top"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Bar color..</p>\n","default":"'auto'"},"barBorderColor":{"type":["Color"],"description":"<p>The border color of bar.</p>\n","default":"'#000'"},"barBorderWidth":{"type":["number"],"description":"<p>The border width of bar. defaults to have no border.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"areaStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Fill color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in radar chart.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in radar chart, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Tree Diagram</strong></p>\n<p>The tree diagram is mainly used to visualize the tree data structure, which is a special hierarchical type with a unique root node, left subtree, and right subtree.</p>\n<p><strong>Note: Forests are not currently supported directly in a single series, and can be implemented by configuring multiple series in an option</strong></p>\n<p><strong>Tree example：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=tree-vertical&edit=1&reset=1\" width=\"900\" height=\"780\" ></iframe>\n\n\n<p><strong>Multiple series are combined into forest：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=tree-legend&edit=1&reset=1\" width=\"800\" height=\"680\" ></iframe>\n\n","properties":{"type":{"type":["string"],"description":"","default":"'tree'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between tree component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"12%"},"top":{"type":["string","number"],"description":"<p>Distance between tree component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"12%"},"right":{"type":["string","number"],"description":"<p>Distance between tree component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":"12%"},"bottom":{"type":["string","number"],"description":"<p>Distance between tree component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":"12%"},"width":{"type":["string","number"],"description":"<p>Width of tree component. </p>\n","default":null},"height":{"type":["string","number"],"description":"<p>Height of tree component. </p>\n","default":null},"layout":{"type":["string"],"description":"<p>The layout of the tree, which can be <code>orthogonal</code> and <code>radial</code> 。Here the <code>orthogonal</code> layout is what we usually refer to the <code>horizontal</code> and <code>vertical</code> direction, the corresponding parameter value is <code>orthogonal</code>. The <code>radial</code> layout refers to the view that the root node as the center and each layer of nodes as the ring, the corresponding parameter value is <code>radial</code>.</p>\n<p><strong>Orthogonal Example：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=tree-basic&edit=1&reset=1\" width=\"780\" height=\"900\" ></iframe>\n\n\n\n<p><strong>Radial Example：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=tree-radial&edit=1&reset=1\" width=\"800\" height=\"800\" ></iframe>\n\n\n","default":"'orthogonal'"},"orient":{"type":["string"],"description":"<p>The direction of the <code>orthogonal</code> layout in the tree diagram. That means this configuration takes effect only if <code>layout = 'orthogonal'</code>. The corresponding directions are <code>from left to right</code>, <code>from right to left</code>, <code>from top to bottom</code>, <code>from bottom to top</code>, with shorthand values <code>'LR'</code>, <code>'RL'</code>, <code>'TB'</code>, <code>'BT'</code>.\n<strong>Note: The previous configuration value <code>'horizontal'</code> is equivalent to <code>'LR'</code>, <code>'vertical'</code> is equivalent to <code>'TB'</code>.</strong></p>\n","default":"'LR'"},"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-tree.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'emptyCircle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-tree.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":7},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable mouse zooming and translating. <code>false</code> by default. If either zooming or translating is wanted, it can be set to <code>'scale'</code> or <code>'move'</code>. Otherwise, set it to be <code>true</code> to enable both.</p>\n","default":false},"expandAndCollapse":{"type":["boolean"],"description":"<p>Subtree collapses and expands interaction, <code>default true</code>. As the drawing area is limited, and usually the nodes of a tree may be more, so there will be hidden between the nodes. In order to avoid this problem, you can put a temporary unrelated subtree folded away, until you need to start when necessary. Such as the above radial layout tree example, the center of the node is filled with blue is the folded away subtree, you can click to expand it.</p>\n<p><strong>Note: If you configure a custom image as the tag for a node, it is not possible to distinguish whether the current node has a collapsed subtree by the fill color. And currently do not support, upload two pictures, respectively represent the collapsing and expansion state of the node. So, if you want to explicitly show the two states of the node, it is recommended to use <code>ECharts</code> regular tag types, such as <code>emptyCircle</code>.</strong></p>\n","default":true},"initialTreeDepth":{"type":["number"],"description":"<p>The initial level (depth) of the tree. The root node is the 0th layer, then the first layer, the second layer, ... , until the leaf node. This configuration item is primarily used in conjunction with <code>collapsing and expansion</code> interactions. The purpose is to prevent the nodes from obscuring each other. If set as -1 or <code>null</code> or <code>undefined</code>, all nodes are expanded.</p>\n","default":2},"itemStyle":{"type":["Object"],"description":"<p>The style of each node in the tree, where [itemStyle.color] (~ series-tree.itemStyle.color) represents the fill color of the node, to distinguish the state of the subtree corresponding to <code>collapsing</code> or <code>expansion</code>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'#c23531'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1.5},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p><code>label</code> describes the style of the text corresponding to each node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"<p>Defines the style of the tree edge.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of the tree edge.</p>\n","default":"\"'#ccc'\""},"width":{"type":["number"],"description":"<p>The width of the tree edge.</p>\n","default":1.5},"curveness":{"type":["number"],"description":"<p>The curvature of the tree edge.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of the tree edge.</p>\n","default":"\"'#ccc'\""},"width":{"type":["number"],"description":"<p>The width of the tree edge.</p>\n","default":1.5},"curveness":{"type":["number"],"description":"<p>The curvature of the tree edge.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"leaves":{"type":["Object"],"description":"<p>Leaf node special configuration, such as the above tree diagram example, the leaf node and non-leaf node label location is different.</p>\n","properties":{"label":{"type":["Object"],"description":"<p>Describes the style of the text label corresponding to the leaf node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>The style of the leaf node in the tree.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}}}},"data":{"type":["Object"],"description":"<p><a href=\"#series-tree.data\">series-tree.data</a> the data format is a tree structure，for example：</p>\n<pre><code class=\"lang-javascript\">{ // note that the outermost layer is an object that represents the root node of the tree.\n name: "flare", // the name of the node, the text corresponding to the current node label.\n label: { // the special label configuration (if necessary).\n ... // the format of the label is shown in the series-tree.label.\n },\n itemStyle: { // the special itemStyle configuration (if necessary).\n ... // the format of the itemstyle is shown in the series-tree.itemStyle。\n },\n children: [\n {\n name: "flex",\n value: 4116, // value, which only displayed in tooltip.\n label: {\n ...\n },\n itemStyle: {\n ...\n },\n collapsed: null, // If set as `true`, the node is collpased in the initialization.\n children: [...] // leaf nodes do not have children, can not write.\n },\n ...\n ]\n};\n</code></pre>\n","properties":{"name":{"type":["string"],"description":"<p>The name of the tree node, used to identify each node.</p>\n"},"value":{"type":["number"],"description":"<p>The value of the node, displayed in the tooltip.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>The style of the node.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The label of the node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"'linear'"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Treemapping\" target=\"_blank\">Treemap</a> is a common way to present "hierarchical data" or "tree data".It primarily highlights the important nodes at all hierarchies in 『Tree』with area.</p>\n<p><strong>Example:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"700\" height=\"580\" ></iframe>\n\n\n\n<p><br>\n<strong>Visual Mapping:</strong></p>\n<p>treemap maps the numerical values to area.</p>\n<p>Moreover, it is able to map some dimensions of data to other visual channel, like colors, lightness of colors and etc.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br>\n<strong>Drill Down:</strong></p>\n<p>The feature <code>drill down</code> means: when clicking a tree node, this node will be set as root and its children will be shown. When <a href=\"#series-treemap.leafDepth\">leafDepth</a> is set, this feature is enabled.</p>\n<p><strong>An example about drill down:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-drill-down&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><br>\n<br>\n<br>\nNotice: There are some difference in treemap configuration between ECharts3 and ECharts2. Some immature configuration ways are no longer supported:</p>\n<ul>\n<li><p>The position method using <code>center/size</code> is no longer supported, and <code>left/top/bottom/right/width/height</code> are used to position treemap, as other components do.</p>\n</li>\n<li><p>The configuration item <code>breadcrumb</code> is moved outside <code>itemStyle/itemStyle.emphasis</code>, and it is in the same level with <code>itemStyle</code> now.</p>\n</li>\n<li><p>The configuration item <code>root</code> is not avaliable temporarily.User can zoom treemap to see some tiny or deep descendants, or using <a href=\"#series-treemap.leafDepth\">leafDepth</a> to enable the feature of "drill down".</p>\n</li>\n<li><p>The configuration item <code>label</code> is moved outside the <code>itemStyle/itemStyle.emphasis</code>, and it is in the same level with <code>itemStyle</code> now.</p>\n</li>\n<li><p>The configuration items <code>itemStyle.childBorderWidth</code> and <code>itemStyle.childBorderColor</code> are not supported anymore (because in this way only 2 levels can be defined). <a href=\"#series-treemap.levels\">series-treemap.levels</a> is used to define all levels now.</p>\n</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'treemap'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between treemap component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"center"},"top":{"type":["string","number"],"description":"<p>Distance between treemap component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"middle"},"right":{"type":["string","number"],"description":"<p>Distance between treemap component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between treemap component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>Width of treemap component. </p>\n","default":"80%"},"height":{"type":["string","number"],"description":"<p>Height of treemap component. </p>\n","default":"80%"},"squareRatio":{"type":["number"],"description":"<p>The expected square ratio. Layout would approach the ratio as close as possible.</p>\n<p>It defaults to be the golden ratio: <code>0.5 * (1 + Math.sqrt(5))</code>.</p>\n"},"leafDepth":{"type":["number"],"description":"<p>When <code>leafDepth</code> is set, the feature "drill down" is enabled, which means when clicking a tree node, this node will be set as root and its children will be shown.</p>\n<p><code>leafDepth</code> represents how many levels are shown at most. For example, when <code>leafDepth</code> is set to <code>1</code>, only one level will be shown.</p>\n<p><code>leafDepth</code> is <code>null</code>/<code>undefined</code> by default, which means that "drill down" is disabled.</p>\n<p><strong>An example about drill down:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-drill-down&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n","default":null},"drillDownIcon":{"type":["string"],"description":"<p>Marker when the node is able to be drilled down.</p>\n","default":"'▶'"},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable dragging roam (move and zoom). Optional values are:</p>\n<ul>\n<li><code>false</code>: roam is disabled.</li>\n<li><code>'scale'</code> or <code>'zoom'</code>: zoom only.</li>\n<li><code>'move'</code> or <code>'pan'</code>: move (translation) only.</li>\n<li><code>true</code>: both zoom and move (translation) are avaliable.</li>\n</ul>\n","default":true},"nodeClick":{"type":["boolean","string"],"description":"<p>The behaviour when clicking a node. Optional values are:</p>\n<ul>\n<li><code>false</code>: Do nothing after clicked.</li>\n<li><code>'zoomToNode'</code>: Zoom to clicked node.</li>\n<li><code>'link'</code>: If there is <a href=\"#series-treemap.data.link\">link</a> in node data, do hyperlink jump after clicked.</li>\n</ul>\n","default":"'zoomToNode'"},"zoomToNodeRatio":{"type":["number"],"description":"<p>The treemap will be auto zoomed to a appropriate ratio when a node is clicked (when <a href=\"#series-treemap.nodeClick\">nodeClick</a> is set as <code>'zoomToNode'</code> and no drill down happens). This configuration item indicates the ratio.</p>\n","default":"0.32*0.32"},"levels":{"type":["Array"],"description":"<p><strong>Multiple Levels Configuration</strong></p>\n<p>treemap adopts 4-level configuration:</p>\n<pre><code>"each node" --> "each level" --> "each series".\n</code></pre><p>That is, we can configurate each node, can also configurate each level of the tree, or set overall configurations on each series. The highest priority is node configuration.</p>\n<p><code>levels</code> is configurations on each levels, which is used most.</p>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">// Notice that in fact the data structure is not "tree", but is "forest".\ndata: [\n {\n name: 'nodeA',\n children: [\n {name: 'nodeAA'},\n {name: 'nodeAB'},\n ]\n },\n {\n name: 'nodeB',\n children: [\n {name: 'nodeBA'}\n ]\n }\n],\nlevels: [\n {...}, // configurations of the top level of the data structure "forest"\n // (the level that contains 'nodeA', 'nodeB' shown above).\n {...}, // configurations of the next level\n // (the level that contains 'nodeAA', 'nodeAB', 'nodeBA' shown above)\n {...}, // configurations of the next level\n ...\n]\n</code></pre>\n<p><br>\n<strong>The Rules about Visual Mapping</strong></p>\n<p>When designing a treemap, we primarily focus on how to visually distinguish "different levels", "different categories in the same level", which requires appropriate settings of "rectangular color", "border thickness", "border color" and even "color saturation of rectangular" and so on on each level.</p>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-disk&edit=1&reset=1\" target=\"_blank\">example</a>. The top level is divided into several parts by colors "red", "green", "blue", and etc ... In each color block, <code>colorSaturation</code> is used to distinguish nodes in sublevel. The border color of the top level is "white", while the border color of the sublevel is the color that based on the current block color and processed by <code>borderColorSaturation</code>.</p>\n<p><code>treemap</code> uses this rule of visual configuration: each level computes its visual value based on the configurations (<code>color</code>, <code>colorSaturation</code>, <code>borderColor</code>, <code>borderColorSaturation</code>) on this level. If there is no certain configuration in a node, it inherits the configuration from its parent.</p>\n<p>In this way, this effect can be configured: set a <code>color</code> list on the parent level, and set <code>colorSaturation</code> on the child level, and then each node in the parent level would obtain a color from the <code>color</code> list, and each node in the child level would obtain a value from <code>colorSaturation</code> and compound it with the color inherited from its parent node to get its final color.</p>\n<p><br>\n<strong>Dimensions and "Extra Visual Mapping"</strong></p>\n<p>See the example below: every <code>value</code> field is set as an Array, in which each item in the array represents a dimension respectively.</p>\n<pre><code class=\"lang-javascript\">[\n {\n value: [434, 6969, 8382],\n children: [\n {\n value: [1212, 4943, 5453],\n id: 'someid-1',\n name: 'description of this node',\n children: [...]\n },\n {\n value: [4545, 192, 439],\n id: 'someid-2',\n name: 'description of this node',\n children: [...]\n },\n ...\n ]\n },\n {\n value: [23, 59, 12],\n children: [...]\n },\n ...\n]\n</code></pre>\n<p><code>treemap</code> will map the first dimension (the first item of the array) to "area". If we want to express more information, we could map another dimension (specified by <a href=\"#series-treemap.viusalDimension\">series-treemap.visualDimension</a>) to another visual types, such as <code>colorSaturation</code> and so on. See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-obama&edit=1&reset=1\" target=\"_blank\">example</a> and select the legend 'Growth'.</p>\n<p><br></p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/treemap-borderColor&edit=1&reset=1\" target=\"_blank\">example</a>. Noticed that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code>borderColorSaturation</code> to lift the saturation.</p>\n<p><br>\n<strong>Explanation about borderWidth, gapWidth, borderColor</strong></p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/treemap-border-gap.png\"></p>\n","default":"[]","items":{"type":"Object","properties":{"visualDimension":{"type":["number"],"description":"<p><code>treemap</code> is able to map any dimensions of data to visual.</p>\n<p>The value of <a href=\"#series-treemap.data\">series-treemap.data</a> can be an array. And each item of the array represents a "dimension". <code>visualDimension</code> specifies the dimension on which visual mapping will be performed.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>visualDimension</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":0},"visualMin":{"type":["number"],"description":"<p>The minimal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code>'value'</code>, you are able to specify extent manually for visual mapping by specifying <code>visualMin</code> or <code>visualMax</code>.</p>\n","default":null},"visualMax":{"type":["number"],"description":"<p>The maximal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code>'value'</code>, you are able to specify extent manually for visual mapping by specifying <code>visualMin</code> or <code>visualMax</code>.</p>\n","default":null},"color":{"type":["Array"],"description":"<p>A color list for a level. Each node in the level will obtain a color from the color list (the rule see <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a>). It is empty by default, which means the global color list will be used.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>color</code> attribute could appear in more than one places:</p>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n"},"colorAlpha":{"type":["Array"],"description":"<p>It indicates the range of tranparent rate (color alpha) for nodes in a level . The range of values is 0 ~ 1.</p>\n<p>For example, <code>colorAlpha</code> can be <code>[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>colorAlpha</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>It indicates the range of saturation (color alpha) for nodes in a level . The range of values is 0 ~ 1.</p>\n<p>For example, <code>colorSaturation</code> can be <code>[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>colorSaturation</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":null},"colorMappingBy":{"type":["string"],"description":"<p>Specify the rule according to which each node obtain color from <a href=\"#series-treemap.levels.color\">color list</a>. Optional values:</p>\n<ul>\n<li><code>'value'</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.value\">series-treemap.data.value</a> to color.</p>\n<p>In this way, the color of each node indicate its value.</p>\n<p><a href=\"#series-treemap.levels.visualDimension\">visualDimension</a> can be used to specify which dimension of <a href=\"#series-treemap.data\">data</a> is used to perform visual mapping.</p>\n<ul>\n<li><code>'index'</code>:</li>\n</ul>\n<p>Map the <code>index</code> (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of <a href=\"#series-treemap.levels.color\">color list</a>, and the second node gets the second color.</p>\n<p>In this way, adjacent nodes are distinguished by color.</p>\n<ul>\n<li><code>'id'</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.id\">series-treemap.data.id</a> to color.</p>\n<p>Since <code>id</code> is used to identify node, if user call <code>setOption</code> to modify the tree, each node will remain the original color before and after <code>setOption</code> called. See this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-obama&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>colorMappingBy</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":"'index'"},"visibleMin":{"type":["number"],"description":"<p>A node will not be shown when its area size is smaller than this value (unit: px square).</p>\n<p>In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>visibleMin</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":10},"childrenVisibleMin":{"type":["number"],"description":"<p>Children will not be shown when area size of a node is smaller than this value (unit: px square).</p>\n<p>This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>childrenVisibleMin</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":null},"label":{"type":["Object"],"description":"<p><code>label</code> decribes the style of the label in each node.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>label</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"<p><code>upperLabel</code> is used to specify whether show label when the node has children. When <a href=\"#series-treemap.upperLabel.show\">upperLabel.show</a> is set as <code>true</code>, the feature that "show parent label" is enabled.</p>\n<p>The same as <a href=\"#series-treemap.label\">series-treemap.label</a>, the option <code>upperLabel</code> can be placed at the root of <a href=\"#series-treemap\">series-treemap</a> directly, or in <a href=\"#series-treemap.level\">series-treemap.level</a>, or in each item of <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n<p>Specifically, <a href=\"#series-treemap.label\">series-treemap.label</a> specifies the style when a node is a leaf, while <code>upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>label</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number"],"description":"<p>Height of label area.</p>\n","default":20},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>itemStyle</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null},"colorAlpha":{"type":["number"],"description":"<p>The tranparent rate of a node, the range is between 0 ~ 1.</p>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>The color saturation of a node. The range is between 0 ~ 1.</p>\n","default":null},"borderWidth":{"type":["number"],"description":"<p>The border width of a node. There is no border when it is set as <code>0</code>.</p>\n<p>Tip, gaps between child nodes are specified by <a href=\"#series-treemap.levels.gapWidth\">gapWidth</a></p>\n","default":0},"gapWidth":{"type":["number"],"description":"<p>Gaps between child nodes.</p>\n","default":0},"borderColor":{"type":["Color"],"description":"<p>The border color and gap color of a node.</p>\n","default":"'#fff',"},"borderColorSaturation":{"type":["Color"],"description":"<p>The color saturation of a border or gap. The value range is between 0 ~ 1.</p>\n<p>Tips:</p>\n<p>When <code>borderColorSaturation</code> is set, the <code>borderColor</code> is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with <code>borderColorSaturation</code>.</p>\n<p>In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.</p>\n<p><br></p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/treemap-borderColor&edit=1&reset=1\" target=\"_blank\">example</a>. Noticed that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code>borderColorSaturation</code> to lift the saturation.</p>\n","default":null},"strokeColor":{"type":["Color"],"description":"<p>Stroke color of each rect.</p>\n","default":null},"strokeWidth":{"type":["number"],"description":"<p>Stroke width of each rect.</p>\n","default":null}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null}}}}}}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false,"properties":{"link":{"type":["string"],"description":"<p>Enable hyperlink jump when clicking on node. It is avaliable when <a href=\"#series-treemap.nodeClick\">series-treemap.nodeClick</a> is <code>'link'</code>.</p>\n<p>See <a href=\"#series-treemap.data.target\">series-treemap.data.target</a>.</p>\n"},"target":{"type":["string"],"description":"<p>The same meaning as <code>target</code> in <code>html</code> <code><a></code> label, See <a href=\"#series-treemap.data.link\">series-treemap.data.link</a>. Option values are: <code>'blank'</code> or <code>'self'</code>.</p>\n","default":"'blank'"},"children":{"type":["Array"],"description":"<p>child nodes, recursive definition, configurations are the same as <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n"},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},"visualDimension":{"type":["number"],"description":"<p><code>treemap</code> is able to map any dimensions of data to visual.</p>\n<p>The value of <a href=\"#series-treemap.data\">series-treemap.data</a> can be an array. And each item of the array represents a "dimension". <code>visualDimension</code> specifies the dimension on which visual mapping will be performed.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>visualDimension</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":0},"visualMin":{"type":["number"],"description":"<p>The minimal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code>'value'</code>, you are able to specify extent manually for visual mapping by specifying <code>visualMin</code> or <code>visualMax</code>.</p>\n","default":null},"visualMax":{"type":["number"],"description":"<p>The maximal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code>'value'</code>, you are able to specify extent manually for visual mapping by specifying <code>visualMin</code> or <code>visualMax</code>.</p>\n","default":null},"colorAlpha":{"type":["Array"],"description":"<p>It indicates the range of tranparent rate (color alpha) of the series. The range of values is 0 ~ 1.</p>\n<p>For example, <code>colorAlpha</code> can be <code>[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>colorAlpha</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>It indicates the range of saturation (color alpha) of the series. The range of values is 0 ~ 1.</p>\n<p>For example, <code>colorSaturation</code> can be <code>[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>colorSaturation</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":null},"colorMappingBy":{"type":["string"],"description":"<p>Specify the rule according to which each node obtain color from <a href=\"#series-treemap.levels.color\">color list</a>. Optional values:</p>\n<ul>\n<li><code>'value'</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.value\">series-treemap.data.value</a> to color.</p>\n<p>In this way, the color of each node indicate its value.</p>\n<p><a href=\"#series-treemap.levels.visualDimension\">visualDimension</a> can be used to specify which dimension of <a href=\"#series-treemap.data\">data</a> is used to perform visual mapping.</p>\n<ul>\n<li><code>'index'</code>:</li>\n</ul>\n<p>Map the <code>index</code> (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of <a href=\"#series-treemap.levels.color\">color list</a>, and the second node gets the second color.</p>\n<p>In this way, adjacent nodes are distinguished by color.</p>\n<ul>\n<li><code>'id'</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.id\">series-treemap.data.id</a> to color.</p>\n<p>Since <code>id</code> is used to identify node, if user call <code>setOption</code> to modify the tree, each node will remain the original color before and after <code>setOption</code> called. See this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-obama&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>colorMappingBy</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":"'index'"},"visibleMin":{"type":["number"],"description":"<p>A node will not be shown when its area size is smaller than this value (unit: px square).</p>\n<p>In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>visibleMin</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":10},"childrenVisibleMin":{"type":["number"],"description":"<p>Children will not be shown when area size of a node is smaller than this value (unit: px square).</p>\n<p>This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>childrenVisibleMin</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":null},"label":{"type":["Object"],"description":"<p><code>label</code> decribes the style of the label in each node.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>label</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"<p><code>upperLabel</code> is used to specify whether show label when the node has children. When <a href=\"#series-treemap.upperLabel.show\">upperLabel.show</a> is set as <code>true</code>, the feature that "show parent label" is enabled.</p>\n<p>The same as <a href=\"#series-treemap.label\">series-treemap.label</a>, the option <code>upperLabel</code> can be placed at the root of <a href=\"#series-treemap\">series-treemap</a> directly, or in <a href=\"#series-treemap.level\">series-treemap.level</a>, or in each item of <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n<p>Specifically, <a href=\"#series-treemap.label\">series-treemap.label</a> specifies the style when a node is a leaf, while <code>upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>label</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number"],"description":"<p>Height of label area.</p>\n","default":20},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>itemStyle</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null},"colorAlpha":{"type":["number"],"description":"<p>The tranparent rate of a node, the range is between 0 ~ 1.</p>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>The color saturation of a node. The range is between 0 ~ 1.</p>\n","default":null},"borderWidth":{"type":["number"],"description":"<p>The border width of a node. There is no border when it is set as <code>0</code>.</p>\n<p>Tip, gaps between child nodes are specified by <a href=\"#series-treemap.levels.gapWidth\">gapWidth</a></p>\n","default":0},"gapWidth":{"type":["number"],"description":"<p>Gaps between child nodes.</p>\n","default":0},"borderColor":{"type":["Color"],"description":"<p>The border color and gap color of a node.</p>\n","default":"'#fff',"},"borderColorSaturation":{"type":["Color"],"description":"<p>The color saturation of a border or gap. The value range is between 0 ~ 1.</p>\n<p>Tips:</p>\n<p>When <code>borderColorSaturation</code> is set, the <code>borderColor</code> is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with <code>borderColorSaturation</code>.</p>\n<p>In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.</p>\n<p><br></p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/treemap-borderColor&edit=1&reset=1\" target=\"_blank\">example</a>. Noticed that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code>borderColorSaturation</code> to lift the saturation.</p>\n","default":null},"strokeColor":{"type":["Color"],"description":"<p>Stroke color of each rect.</p>\n","default":null},"strokeWidth":{"type":["number"],"description":"<p>Stroke width of each rect.</p>\n","default":null}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null}}}}},"breadcrumb":{"type":["Object"],"description":"<p>breadcrumb, showing the path of the current node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the breadcrumb.</p>\n","default":true},"left":{"type":["string","number"],"description":"<p>Distance between asdf component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'center'"},"top":{"type":["string","number"],"description":"<p>Distance between asdf component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between asdf component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between asdf component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":0},"height":{"type":["number"],"description":"<p>The height of breadcrumb.</p>\n","default":22},"emptyItemWidth":{"type":["number"],"description":"<p>When is no content in breadcrumb, this minimal width need to be set up.</p>\n","default":25},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>boxplot color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"rgba(0,0,0,0.7)"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code>color</code>.</p>\n","default":"rgba(255,255,255,0.7)"},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"rgba(150,150,150,1)"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#fff"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"emphasis":{"type":["*"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"rgba(0,0,0,0.7)"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code>color</code>.</p>\n","default":"rgba(255,255,255,0.7)"},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":3},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"rgba(150,150,150,1)"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"textStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"#fff"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"data":{"type":["Array"],"description":"<p>the the data format of <a href=\"#series-treemap.data\">series-treemap.data</a> is a forest. For example:</p>\n<pre><code class=\"lang-javascript\">[ // Tips, the top level is an array.\n {\n value: 1212,\n children: [\n {\n value: 2323, // The value of this node, indicating the area size.\n // it could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.\n // The other items of the array can be used for extra visual mapping. See details in series-treemp.levels.\n id: 'someid-1', // id is not mandatory.\n // But if using API, id is used to locate node.\n name: 'description of this node', // show the description text in rectangle.\n children: [...],\n label: { // The label config of this node (if necessary).\n ... // see series-treemap.label.\n },\n itemStyle: { // the itemStyle of this node (if necessary).\n ... // the see series-treemap.itemStyle.\n }\n },\n {\n value: 4545,\n id: 'someid-2',\n name: 'description of this node',\n children: [\n {\n value: 5656,\n id: 'someid-3',\n name: 'description of this node',\n children: [...]\n },\n ...\n ]\n }\n ]\n },\n {\n value: [23, 59, 12]\n // if there is no children, here could be nothing.\n },\n ...\n]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["number","Array"],"description":"<p>The value of this node, indicating the area size.</p>\n<p>It could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.</p>\n<p>The other items of the array can be used for extra visual mapping. See details in series-treemp.levels.</p>\n"},"id":{"type":["string"],"description":"<p><code>id</code> is not mandatory.\nBut if using API, id is used to locate node.</p>\n"},"name":{"type":["string"],"description":"<p>Show the description text in rectangle.</p>\n"},"visualDimension":{"type":["number"],"description":"<p><code>treemap</code> is able to map any dimensions of data to visual.</p>\n<p>The value of <a href=\"#series-treemap.data\">series-treemap.data</a> can be an array. And each item of the array represents a "dimension". <code>visualDimension</code> specifies the dimension on which visual mapping will be performed.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>visualDimension</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":0},"visualMin":{"type":["number"],"description":"<p>The minimal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code>'value'</code>, you are able to specify extent manually for visual mapping by specifying <code>visualMin</code> or <code>visualMax</code>.</p>\n","default":null},"visualMax":{"type":["number"],"description":"<p>The maximal value of current level. Auto-statistics by default.</p>\n<p>When <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a> is set to <code>'value'</code>, you are able to specify extent manually for visual mapping by specifying <code>visualMin</code> or <code>visualMax</code>.</p>\n","default":null},"color":{"type":["Array"],"description":"<p>A color list for a level. Each node in the level will obtain a color from the color list (the rule see <a href=\"#series-treemap.levels.colorMappingBy\">colorMappingBy</a>). It is empty by default, which means the global color list will be used.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>color</code> attribute could appear in more than one places:</p>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n"},"colorAlpha":{"type":["Array"],"description":"<p>It indicates the range of tranparent rate (color alpha) for nodes in a level . The range of values is 0 ~ 1.</p>\n<p>For example, <code>colorAlpha</code> can be <code>[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>colorAlpha</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>It indicates the range of saturation (color alpha) for nodes in a level . The range of values is 0 ~ 1.</p>\n<p>For example, <code>colorSaturation</code> can be <code>[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>colorSaturation</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":null},"colorMappingBy":{"type":["string"],"description":"<p>Specify the rule according to which each node obtain color from <a href=\"#series-treemap.levels.color\">color list</a>. Optional values:</p>\n<ul>\n<li><code>'value'</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.value\">series-treemap.data.value</a> to color.</p>\n<p>In this way, the color of each node indicate its value.</p>\n<p><a href=\"#series-treemap.levels.visualDimension\">visualDimension</a> can be used to specify which dimension of <a href=\"#series-treemap.data\">data</a> is used to perform visual mapping.</p>\n<ul>\n<li><code>'index'</code>:</li>\n</ul>\n<p>Map the <code>index</code> (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of <a href=\"#series-treemap.levels.color\">color list</a>, and the second node gets the second color.</p>\n<p>In this way, adjacent nodes are distinguished by color.</p>\n<ul>\n<li><code>'id'</code>:</li>\n</ul>\n<p>Map <a href=\"#series-treemap.data.id\">series-treemap.data.id</a> to color.</p>\n<p>Since <code>id</code> is used to identify node, if user call <code>setOption</code> to modify the tree, each node will remain the original color before and after <code>setOption</code> called. See this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=treemap-obama&edit=1&reset=1\" target=\"_blank\">example</a>.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>colorMappingBy</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":"'index'"},"visibleMin":{"type":["number"],"description":"<p>A node will not be shown when its area size is smaller than this value (unit: px square).</p>\n<p>In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>visibleMin</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":10},"childrenVisibleMin":{"type":["number"],"description":"<p>Children will not be shown when area size of a node is smaller than this value (unit: px square).</p>\n<p>This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href=\"#series-treemap.levels\">series-treemap.levels</a>.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>childrenVisibleMin</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n","default":null},"label":{"type":["Object"],"description":"<p><code>label</code> decribes the style of the label in each node.</p>\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>label</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"<p><code>upperLabel</code> is used to specify whether show label when the node has children. When <a href=\"#series-treemap.upperLabel.show\">upperLabel.show</a> is set as <code>true</code>, the feature that "show parent label" is enabled.</p>\n<p>The same as <a href=\"#series-treemap.label\">series-treemap.label</a>, the option <code>upperLabel</code> can be placed at the root of <a href=\"#series-treemap\">series-treemap</a> directly, or in <a href=\"#series-treemap.level\">series-treemap.level</a>, or in each item of <a href=\"#series-treemap.data\">series-treemap.data</a>.</p>\n<p>Specifically, <a href=\"#series-treemap.label\">series-treemap.label</a> specifies the style when a node is a leaf, while <code>upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-show-parent&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n\n\n<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>label</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number"],"description":"<p>Height of label area.</p>\n","default":20},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p>Tps: In treemap, <code>itemStyle</code> attribute could appear in more than one places:</p>\n<ul>\n<li>It could appear in <a href=\"#series-treemap\">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n<ul>\n<li><p>It could appear in each array element of <a href=\"#series-treemap.levels\">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</p>\n</li>\n<li><p>It could appear in each node of <a href=\"#series-treemap.data\">series-treemap.data</a>, indicating the particular setting of each node.</p>\n</li>\n</ul>\n</blockquote>\n<p><br></p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null},"colorAlpha":{"type":["number"],"description":"<p>The tranparent rate of a node, the range is between 0 ~ 1.</p>\n","default":null},"colorSaturation":{"type":["number"],"description":"<p>The color saturation of a node. The range is between 0 ~ 1.</p>\n","default":null},"borderWidth":{"type":["number"],"description":"<p>The border width of a node. There is no border when it is set as <code>0</code>.</p>\n<p>Tip, gaps between child nodes are specified by <a href=\"#series-treemap.levels.gapWidth\">gapWidth</a></p>\n","default":0},"gapWidth":{"type":["number"],"description":"<p>Gaps between child nodes.</p>\n","default":0},"borderColor":{"type":["Color"],"description":"<p>The border color and gap color of a node.</p>\n","default":"'#fff',"},"borderColorSaturation":{"type":["Color"],"description":"<p>The color saturation of a border or gap. The value range is between 0 ~ 1.</p>\n<p>Tips:</p>\n<p>When <code>borderColorSaturation</code> is set, the <code>borderColor</code> is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with <code>borderColorSaturation</code>.</p>\n<p>In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.</p>\n<p><br></p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/treemap-borderColor&edit=1&reset=1\" target=\"_blank\">example</a>. Noticed that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code>borderColorSaturation</code> to lift the saturation.</p>\n","default":null},"strokeColor":{"type":["Color"],"description":"<p>Stroke color of each rect.</p>\n","default":null},"strokeWidth":{"type":["number"],"description":"<p>Stroke width of each rect.</p>\n","default":null}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"upperLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"ellipsis":{"type":["boolean"],"description":"<p>When the text is overflow, whether to replace the excess part with apostrophe.</p>\n","default":true}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of a node. It use global palette <a href=\"#color\">option.color</a> by default.</p>\n","default":null}}}}}}}},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1500},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"quinticInOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_/_Sunburst_chart_/_Multilevel_pie_chart\" target=\"_blank\">Sunburst Chart</a> is composed of multiple pie charts. From the view of data structure, inner rings are the parent nodes of outer rings. Therefore, it can show the partial-overall relationship as <a href=\"#series-pie\">Pie</a> charts, and also level relation as <a href=\"#series-treemap\">Treemap</a> charts.</p>\n<p><strong>For example:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-monochrome&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-drink&edit=1&reset=1\" width=\"700\" height=\"700\" ></iframe>\n\n\n<p><strong>Data mining</strong></p>\n<p>Sunburst charts support data mining by default. That means, when a user clicks a sector, it will be used as root node, and there will be a circle in the center for return to parent node. If data mining is not needed, it can be disabled by <a href=\"#series-treemap.nodeClick\">series-sunburst.nodeClick</a>.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'sunburst'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"center":{"type":["Array"],"description":"<p>Center position of Sunburst chart, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: ['50%', '50%']\n</code></pre>","default":"['50%', '50%']"},"radius":{"type":["number","string","Array"],"description":"<p>Radius of Sunburst chart. Value can be:</p>\n<ul>\n<li><code>number</code>: Specify outside radius directly.</li>\n<li><code>string</code>: For example, <code>'20%'</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</li>\n<li><code>Array.<number|string></code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</li>\n</ul>\n","default":"[0, '75%']"},"data":{"type":["Array"],"description":"<p>The data structure of <a href=\"#series-sunburst.data\">series-sunburst.data</a> is like tree. For example:</p>\n<pre><code class=\"lang-js\">[{\n name: 'parent1',\n value: 10, // value of parent node can be left unset, and sum of\n // children values will be used in this case.\n // If is set, and is larger than sum of children nodes,\n // the reset can be used for other parts in parent.\n children: [{\n value: 5,\n name: 'child1',\n children: [{\n value: 2,\n name: 'grandchild1',\n itemStyle: {\n // every data can have its own itemStyle,\n // which will overwrites series.itemStyle and level.itemStyle\n },\n label: {\n // label style, the same to above\n }\n }]\n }, {\n value: 3,\n name: 'child2'\n }],\n itemStyle: {\n // itemStyle of parent1, which will not be inherited for children\n },\n label: {\n // label of parent1, which will not be inherited for children\n }\n}, {\n name: 'parent2',\n value: 4\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"value":{"type":["number"],"description":"<p>Value for each item. If contains children, value can be left unset, and sum of children values will be used in this case.</p>\n"},"name":{"type":["string"],"description":"<p>Name displayed in each sector.</p>\n"},"link":{"type":["string"],"description":"<p>Link address that redirects to when this sector is clicked. Only useful when <a href=\"#series-treemap.nodeClick\">series-sunburst.nodeClick</a> is set to be <code>'link'</code>.</p>\n<p>See <a href=\"#series-sunburst.data.target\">series-sunburst.data.target</a>.</p>\n"},"target":{"type":["string"],"description":"<p>Like <code>target</code> attribute of HTML <code><a></code>, which can either be <code>'blank'</code> or <code>'self'</code>. See <a href=\"#series-sunburst.data.link\">series-sunburst.data.link</a>.</p>\n","default":"'blank'"},"label":{"type":["Object"],"description":"<p><code>label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code>number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code>'radial'</code>, standing for radial rotation; or <code>'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>'radial'</code>. If no rotation is wanted, it can be set to <code>0</code>.</p>\n<p>The following example shows different <code>rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>. Note that <code>'left'</code> stands for inner side, and <code>'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}},"emphasis":{"type":["Object"],"description":"<p>Item style when mouse is hovering. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code>label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code>number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code>'radial'</code>, standing for radial rotation; or <code>'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>'radial'</code>. If no rotation is wanted, it can be set to <code>0</code>.</p>\n<p>The following example shows different <code>rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>. Note that <code>'left'</code> stands for inner side, and <code>'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"highlight":{"type":["Object"],"description":"<p>Item style when mouse is hovering related items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code>label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code>number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code>'radial'</code>, standing for radial rotation; or <code>'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>'radial'</code>. If no rotation is wanted, it can be set to <code>0</code>.</p>\n<p>The following example shows different <code>rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>. Note that <code>'left'</code> stands for inner side, and <code>'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"downplay":{"type":["Object"],"description":"<p>Item style when mouse is hovering unrelated items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code>label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code>number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code>'radial'</code>, standing for radial rotation; or <code>'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>'radial'</code>. If no rotation is wanted, it can be set to <code>0</code>.</p>\n<p>The following example shows different <code>rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>. Note that <code>'left'</code> stands for inner side, and <code>'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"children":{"type":["Array"],"description":"<p>Children nodes, which is recursively defined. In the same format to <a href=\"#series-sunburst.data\">series-sunburst.data</a>.</p>\n"}}}},"label":{"type":["Object"],"description":"<p><code>label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code>number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code>'radial'</code>, standing for radial rotation; or <code>'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>'radial'</code>. If no rotation is wanted, it can be set to <code>0</code>.</p>\n<p>The following example shows different <code>rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>. Note that <code>'left'</code> stands for inner side, and <code>'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}},"highlightPolicy":{"type":["string"],"description":"<p>When mouse hovers a sector, the sector is emphasized. <strong>If <code>highlightPolicy</code> is set to be <code>'descendant'</code>, then the sector and its descendant will be <em>highlighted</em>, and others will be <em>downplayed</em>. If <code>highlightPolicy</code> is <code>'ancestor'</code>, then the sector and its ancestors will be highlighted. If it is set to be <code>'self'</code>, then the sector will be highlighted and others downplayed. If it is set to be <code>'none'</code>, then others will not be downplayed.</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-descendant&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<p>The <code>highlightPolicy</code> value above is the default value <code>'descendant'</code>. We use <code>dispatchAction</code> to highlight certain sector. Target sector will use the style of <code>emphasis</code>, and related sectors decided by <code>highlightPolicy</code> uses the style of <code>highlight</code>, and others use <code>downplay</code>.</p>\n<pre><code class=\"lang-js\">itemStyle: {\n color: 'yellow',\n borderWidth: 2,\n emphasis: {\n color: 'red'\n },\n highlight: {\n color: 'orange'\n },\n downplay: {\n color: '#ccc'\n }\n}\n</code></pre>\n<p>If <code>highlightPolicy</code> is set to be <code>'ancestor'</code>, then the result looks like:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-ancestor&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n\n","default":"'descendant'"},"nodeClick":{"type":["boolean","string"],"description":"<p>The action of clicking a sector, which can be:</p>\n<ul>\n<li><code>false</code>: nothing happens.</li>\n<li><code>'rootToNode'</code>: use the clicked sector as root.</li>\n<li><code>'link'</code>：if <a href=\"#series-sunburst.data.link\">link</a> is set, the page will redirect to it.</li>\n</ul>\n","default":"'rootToNode'"},"sort":{"type":["string","Function"],"description":"<p>Sorting method that sectors use based on <a href=\"#series-sunburst.data.value\"><code>value</code></a>, which is the sum of children when not set. The default value <code>'desc'</code> states for descending order, while it can also be set to be <code>'asc'</code> for ascending order, or <code>null</code> for not sorting, or callback function like:</p>\n<pre><code class=\"lang-js\">function(nodeA, nodeB) {\n return nodeA.getValue() - nodeB.getValue();\n}\n</code></pre>\n","default":"'desc'"},"renderLabelForZeroData":{"type":["boolean"],"description":"<p>If there is no <code>name</code>, whether need to render it.</p>\n","default":false},"emphasis":{"type":["Object"],"description":"<p>Item style when mouse is hovering. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code>label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code>number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code>'radial'</code>, standing for radial rotation; or <code>'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>'radial'</code>. If no rotation is wanted, it can be set to <code>0</code>.</p>\n<p>The following example shows different <code>rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>. Note that <code>'left'</code> stands for inner side, and <code>'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"highlight":{"type":["Object"],"description":"<p>Item style when mouse is hovering related items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code>label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code>number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code>'radial'</code>, standing for radial rotation; or <code>'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>'radial'</code>. If no rotation is wanted, it can be set to <code>0</code>.</p>\n<p>The following example shows different <code>rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>. Note that <code>'left'</code> stands for inner side, and <code>'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"downplay":{"type":["Object"],"description":"<p>Item style when mouse is hovering unrelated items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code>label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code>number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code>'radial'</code>, standing for radial rotation; or <code>'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>'radial'</code>. If no rotation is wanted, it can be set to <code>0</code>.</p>\n<p>The following example shows different <code>rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>. Note that <code>'left'</code> stands for inner side, and <code>'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"levels":{"type":["Array"],"description":"<p><strong>Multiple levels</strong></p>\n<p>Sunburst chart has a leveled structure. To make it convenient, we provide a <code>levels</code> option, which is an array. The first element of it is for returning to parent node when data mining. The following elements are for levels from center to outside.</p>\n<p>For example, if we don't want the data mining, and want to set the most inside sector to be red, and text to be blue, we can set the option like:</p>\n<pre><code class=\"lang-js\">series: {\n // ...\n levels: [\n {\n // Blank setting for data mining\n },\n {\n // The most inside level\n itemStyle: {\n color: 'red'\n },\n label: {\n color: 'blue'\n }\n },\n {\n // The second level\n }\n ]\n}\n</code></pre>\n","default":"[]","items":{"type":"Object","properties":{"label":{"type":["Object"],"description":"<p><code>label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code>number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code>'radial'</code>, standing for radial rotation; or <code>'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>'radial'</code>. If no rotation is wanted, it can be set to <code>0</code>.</p>\n<p>The following example shows different <code>rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>. Note that <code>'left'</code> stands for inner side, and <code>'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}},"emphasis":{"type":["Object"],"description":"<p>Item style when mouse is hovering. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code>label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code>number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code>'radial'</code>, standing for radial rotation; or <code>'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>'radial'</code>. If no rotation is wanted, it can be set to <code>0</code>.</p>\n<p>The following example shows different <code>rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>. Note that <code>'left'</code> stands for inner side, and <code>'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"highlight":{"type":["Object"],"description":"<p>Item style when mouse is hovering related items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code>label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code>number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code>'radial'</code>, standing for radial rotation; or <code>'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>'radial'</code>. If no rotation is wanted, it can be set to <code>0</code>.</p>\n<p>The following example shows different <code>rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>. Note that <code>'left'</code> stands for inner side, and <code>'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}},"downplay":{"type":["Object"],"description":"<p>Item style when mouse is hovering unrelated items. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"label":{"type":["Object"],"description":"<p><code>label</code> sets the text style for every sectors.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.label\">series.data.label</a> > <a href=\"#series-sunburst.levels.label\">series.levels.label</a> > <a href=\"#series-sunburst.label\">series.label</a>.</strong></p>\n<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"rotate":{"type":["string","number"],"description":"<p>If it is <code>number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code>'radial'</code>, standing for radial rotation; or <code>'tangential'</code>, standing for tangential rotation.</p>\n<p>By default, it is <code>'radial'</code>. If no rotation is wanted, it can be set to <code>0</code>.</p>\n<p>The following example shows different <code>rotate</code> settings:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-label-rotate&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'radial'"},"align":{"type":["string"],"description":"<p>Align of text, which can be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>. Note that <code>'left'</code> stands for inner side, and <code>'right'</code> stands for outer side.</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n","default":"'center'"},"minAngle":{"type":["number"],"description":"<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n","default":null},"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of Sunburst sectors.</p>\n<p>Style can be set in <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> for sectors of this series, or <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> for the whole level, or<a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> for single sector. If <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> is defined, it will cover the setting of <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a> and <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a>.</p>\n<p><strong>Priority: <a href=\"#series-sunburst.data.itemStyle\">series.data.itemStyle</a> > <a href=\"#series-sunburst.levels.itemStyle\">series.levels.itemStyle</a> > <a href=\"#series-sunburst.itemStyle\">series.itemStyle</a>.</strong></p>\n<p>In ECharts, <em>emphasis</em> is for styles when mouse hovers. For Sunburst charts, there are two extra states: <em>highlight</em> for highlighting items that relates to the emphasized one, and <em>downplay</em> for others when emphasizing an item. See <a href=\"#series-sunburst.highlightPolicy\">highlightPolicy</a>.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'white'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":1}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"'cubicOut'"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":500},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},{"type":["Object"],"description":"<p><a href=\"https://en.wikipedia.org/wiki/Box_plot\" target=\"_blank\">Boxplot</a> is a convenient way of graphically depicting groups of numerical data through their quartiles.</p>\n<p><strong>Example:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=boxplot-light-velocity&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br>\nMultiple <code>series</code> can be displayed in the same coordinate system. Please refer to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=boxplot-multi&edit=1&reset=1\" target=\"_blank\">this example</a>.</p>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'boxplot'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-cartesian2d.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-cartesian2d.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n","default":0},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable the animation when hovering on box.</p>\n","default":true},"layout":{"type":["string"],"description":"<p>Layout methods, whose optional values are:</p>\n<ul>\n<li><p><code>'horizontal'</code>: horizontally layout all boxes.</p>\n</li>\n<li><p><code>'vertical'</code>: vertically layout all boxes.</p>\n</li>\n</ul>\n<p>The default value is decided by:</p>\n<ul>\n<li>if there is a <code>category</code> axis:<ul>\n<li>if it is horizontal, use <code>'horizontal'</code>;</li>\n<li>otherwise use <code>'vertical'</code>;</li>\n</ul>\n</li>\n<li>otherwise use <code>'horizontal'</code>.</li>\n</ul>\n","default":null},"boxWidth":{"type":["Array"],"description":"<p>Up and bottom boundary of box width. The array is in the form of <code>[min, max]</code>.</p>\n<p>It could be absolute value in pixel, such as <code>[7, 50]</code>, or percentage, such as <code>['40%', '90%']</code>. The percentage means the percentage to the maximum possible width.</p>\n","default":"[7, 50]"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":2},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":5},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"rgba(0,0,0,0.4)"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":2},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"dimensions":{"type":["Array"],"description":"<p><code>dimensions</code> can be used to define dimension info for <code>series.data</code> or <code>dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code>dimensions</code> here. But if <code>dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code>dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // Specify name for each dimesions, which will be displayed in tooltip.\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: [\n null, // If you do not intent to defined this dimension, use null is fine.\n {type: 'ordinal'}, // Specify type of this dimension.\n // 'ordinal' is always used in string.\n // If type is not specified, echarts will guess type by data.\n {name: 'good', type: 'number'},\n 'bad' // Equals to {name: 'bad'}.\n ]\n}\n</code></pre>\n<p>Each data item of <code>dimensions</code> can be:</p>\n<ul>\n<li><code>string</code>, for example, <code>'someName'</code>, which equals to <code>{name: 'someName'}</code>.</li>\n<li><code>Object</code>, where the attributes can be:<ul>\n<li>name: <code>string</code>.</li>\n<li>type: <code>string</code>, supports:<ul>\n<li><code>number</code></li>\n<li><code>float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code>int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code>ordinal</code>, discrete value, which represents string generally.</li>\n<li><code>time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code>string</code>, generally used in tooltip for dimension display. If not specified, use <code>name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code>dimensions</code> is specified, the default <code>tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code>tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code>data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // Each column is called a dimension.\n // There are five dimensions: 0, 1, 2, 3, 4。\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n encode: {\n x: [3, 1, 5], // Dimension 3, 1, 5 is mapped to x axis.\n y: 2, // Dimension 2 is mapped to y axis.\n tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n }\n }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code>encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n encode: {\n x: 'date',\n y: ['open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" target=\"_blank\">example</a> for <code>encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code>encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n xAxis: {},\n yAxis: {},\n dataZoom: [{\n xAxisIndex: 0\n }, {\n yAxisIndex: 0\n }],\n series: {\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'circle',\n shape: {\n cx: 100, // x position is always 100\n cy: api.coord([0, api.value(0)])[1],\n r: 30\n },\n style: {\n fill: 'blue'\n }\n };\n },\n encode: {\n // Then the series will not be controlled\n // by x axis and corresponding dataZoom.\n x: -1,\n y: 1\n },\n data: [ ... ]\n }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data should be the two-dimensional array shown as follow.</p>\n<pre><code class=\"lang-javascript\">[\n [655, 850, 940, 980, 1175],\n [672.5, 800, 845, 885, 1012.5],\n [780, 840, 855, 880, 940],\n [621.25, 767.5, 815, 865, 1011.25],\n { // the data item could also be an Object, so that it could contains special settings for this data item.\n value: [713.75, 807.5, 810, 870, 963.75],\n itemStyle: {...}\n },\n ...\n]\n</code></pre>\n<p>Every data item (each line in the example above) in the two-dimensional array will be rendered into a box, and each line have five values as:</p>\n<pre><code class=\"lang-javascript\">[min, Q1, median (or Q2), Q3, max]\n</code></pre>\n<p><strong>Data Processing</strong></p>\n<p>ECharts doesn't contain data processing modules, so the five statistic values should be calculated by yourself and then passes into <code>boxplot</code>.</p>\n<p>However, ECharts also provide some simple <a href=\"https://github.com/ecomfe/echarts/tree/master/extension/dataTool\" target=\"_blank\">raw data processing tools</a>. For example, this <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity&edit=1&reset=1\" target=\"_blank\">example</a> uses <code>echarts.dataTool.prepareBoxplotData</code> to proceed simple data statistics.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>Value of data item.</p>\n<pre><code class=\"lang-javascript\">[min, Q1, median (or Q2), Q3, max]\n</code></pre>\n"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>boxplot color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#fff"},"borderColor":{"type":["Color"],"description":"<p>boxplot border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p>boxplot border width. No border when it is set to be 0.</p>\n","default":2},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":5},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"rgba(0,0,0,0.4)"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":2},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":2},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-boxplot.markPoint.data.x\">x</a>, <a href=\"#series-boxplot.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-boxplot.markPoint.data.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-boxplot.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-boxplot.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-boxplot.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'maximum',\n type: 'max'\n }, \n {\n name: 'coordinate',\n coord: [10, 20]\n }, {\n name: 'fixed x position',\n yAxis: 10,\n x: '90%'\n }, \n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> maximum value.</li>\n<li><code>'max'</code> minimum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-boxplot.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code>0</code> (xAxis, radiusAxis), <code>1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-boxplot.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-boxplot.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-boxplot.markLine.data.0.x\">x</a>, <a href=\"#series-boxplot.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-boxplot.markLine.data.0.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-boxplot.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-boxplot.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-boxplot.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code>xAxis</code> or <code>yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code>type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code>valueIndex</code>.</p>\n<pre><code>data: [\n {\n name: 'average line',\n // 'average', 'min', and 'max' are supported\n type: 'average'\n },\n {\n name: 'Horizontal line with Y value at 100',\n yAxis: 100\n },\n [\n {\n // Use the same name with starting and ending point\n name: 'Minimum to Maximum',\n type: 'min'\n },\n {\n type: 'max'\n }\n ],\n [\n {\n name: 'Markline between two points',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [{\n // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n yAxis: 'max',\n x: '90%'\n }, {\n type: 'max'\n }],\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-boxplot.markArea.data.0.x\">x</a>, <a href=\"#series-boxplot.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-boxplot.markArea.data.0.coord\">coord</a>, which can be also set as <code>'min'</code>, <code>'max'</code>, <code>'average'</code> (e.g, <code>coord: [23, 'min']</code>, or <code>coord: ['average', 'max']</code>)。</p>\n</li>\n</ol>\n<ol>\n<li>Locate the point on the min value or max value of <code>series.data</code> using <a href=\"#series-boxplot.markArea.data.0.type\">type</a>, where <a href=\"#series-boxplot.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-boxplot.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code>xAxis</code> or <code>yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n [\n {\n name: 'From average to max',\n type: 'average'\n },\n {\n type: 'max'\n }\n ],\n\n [\n {\n name: 'Mark area between two points in data coordiantes',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [\n {\n name: 'From 60 to 80',\n yAxis: 60\n },\n {\n yAxis: 80\n }\n ], [\n {\n name: 'Mark area covers all data'\n coord: ['min', 'min']\n },\n {\n coord: ['max', 'max']\n }\n ],\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in Box plot.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in Box plot, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":800},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"elasticOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p>A <a href=\"https://en.wikipedia.org/wiki/Candlestick_chart\" target=\"_blank\">candlestick</a> chart (also called Japanese candlestick chart) is a style of financial chart used to describe price movements of a security, derivative, or currency.</p>\n<p>ECharts3 supports both <code>'candlestick'</code> and <code>'k'</code> in <a href=\"#(series.type\">series.type</a> (<code>'k'</code> would automatically turns into <code>'candlestick'</code>).</p>\n<p><strong>An example:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=candlestick-sh&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n<p><br>\n<strong>About color of increase and decrease</strong></p>\n<p>Different countries or regions have different implications on the color of candle stick chart. It may use red to imply increasing with red and decreasing with blue (in China mainland, Taiwan, Japan, Koera, and so on), or to imply increasing with green and decreasing with red (in Europ, North America, Hong Kong, Singapore, and so on). Besides color, the increase and decrease of stock may also be represented with candle stick with or without filling colors.</p>\n<p>We use red to represent increasing and blue decreasing by default. If you want to change the configuration, you may change the following parameters.</p>\n<ul>\n<li><a href=\"#series-candlestick.itemStyle.color\">series-candlestick.itemStyle.color</a>: fill color for bullish candle stick (namely, increase)</li>\n<li><a href=\"#series-candlestick.itemStyle.color0\">series-candlestick.itemStyle.color0</a>: fill color for bearish candle stick (namely, decrease)</li>\n<li><a href=\"#series-candlestick.itemStyle.borderColor\">series-candlestick.itemStyle.borderColor</a>: border color for bullish candle stick (namely, increase)</li>\n<li><a href=\"series-candlestick.itemStyle.borderColor0\" target=\"_blank\">series-candlestick.itemStyle.borderColor0</a>: border color for bearish candle stick (namely, decrease)</li>\n</ul>\n<p><br>\n<br></p>\n","properties":{"type":{"type":["string"],"description":"","default":"'candlestick'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-cartesian2d.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-cartesian2d.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n","default":0},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable animitation when hovering on box.</p>\n","default":true},"layout":{"type":["string"],"description":"<p>Layout method, whose values may be:</p>\n<ul>\n<li><p><code>'horizontal'</code>: horizontally layout all boxs.</p>\n</li>\n<li><p><code>'vertical'</code>: vertically layout all boxs.</p>\n</li>\n</ul>\n<p>The default value is decided by:</p>\n<ul>\n<li>if there is a <code>category</code> axis:<ul>\n<li>if it is horizontal, use <code>'horizontal'</code>;</li>\n<li>otherwise use <code>'vertical'</code>;</li>\n</ul>\n</li>\n<li>otherwise use <code>'horizontal'</code>.</li>\n</ul>\n","default":null},"barWidth":{"type":["number"],"description":"<p>Specify bar width. Absolute value (like <code>10</code>) or percentage (like <code>'20%'</code>, according to band width) can be used. Auto adapt by default.</p>\n"},"barMinWidth":{"type":["number"],"description":"<p>Specify bar min width. Absolute value (like <code>10</code>) or percentage (like <code>'20%'</code>, according to band width) can be used. Auto adapt by default.</p>\n"},"barMaxWidth":{"type":["number"],"description":"<p>Specify bar max width. Absolute value (like <code>10</code>) or percentage (like <code>'20%'</code>, according to band width) can be used. Auto adapt by default.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Item style of candlestick.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"color0":{"type":["Color"],"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderColor":{"type":["Color"],"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"borderColor0":{"type":["Color"],"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderWidth":{"type":["number"],"description":"<p>Border width of candlestick. There is no border when it is <code>0</code>.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Emphasis style of candlestick.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"color0":{"type":["Color"],"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderColor":{"type":["Color"],"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"borderColor0":{"type":["Color"],"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderWidth":{"type":["number"],"description":"<p>Border width of candlestick. There is no border when it is <code>0</code>.</p>\n","default":2},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"large":{"type":["boolean"],"description":"<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code>largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can't be customized any more.</p>\n","default":true},"largeThreshold":{"type":["number"],"description":"<p>The threshold enabling the drawing optimization.</p>\n","default":600},"progressive":{"type":["number"],"description":"<p><code>progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n","default":3000},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, "progressive rendering" is enabled.</p>\n","default":10000},"progressiveChunkMode":{"type":["string"],"description":"<p>Chunk approach, optional values:</p>\n<ul>\n<li><code>'sequential'</code>: slice data by data index.</li>\n<li><code>'mod'</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n","default":"mod"},"dimensions":{"type":["Array"],"description":"<p><code>dimensions</code> can be used to define dimension info for <code>series.data</code> or <code>dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code>dimensions</code> here. But if <code>dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code>dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // Specify name for each dimesions, which will be displayed in tooltip.\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: [\n null, // If you do not intent to defined this dimension, use null is fine.\n {type: 'ordinal'}, // Specify type of this dimension.\n // 'ordinal' is always used in string.\n // If type is not specified, echarts will guess type by data.\n {name: 'good', type: 'number'},\n 'bad' // Equals to {name: 'bad'}.\n ]\n}\n</code></pre>\n<p>Each data item of <code>dimensions</code> can be:</p>\n<ul>\n<li><code>string</code>, for example, <code>'someName'</code>, which equals to <code>{name: 'someName'}</code>.</li>\n<li><code>Object</code>, where the attributes can be:<ul>\n<li>name: <code>string</code>.</li>\n<li>type: <code>string</code>, supports:<ul>\n<li><code>number</code></li>\n<li><code>float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code>int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code>ordinal</code>, discrete value, which represents string generally.</li>\n<li><code>time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code>string</code>, generally used in tooltip for dimension display. If not specified, use <code>name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code>dimensions</code> is specified, the default <code>tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code>tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code>data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // Each column is called a dimension.\n // There are five dimensions: 0, 1, 2, 3, 4。\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n encode: {\n x: [3, 1, 5], // Dimension 3, 1, 5 is mapped to x axis.\n y: 2, // Dimension 2 is mapped to y axis.\n tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n }\n }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code>encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n encode: {\n x: 'date',\n y: ['open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" target=\"_blank\">example</a> for <code>encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code>encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n xAxis: {},\n yAxis: {},\n dataZoom: [{\n xAxisIndex: 0\n }, {\n yAxisIndex: 0\n }],\n series: {\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'circle',\n shape: {\n cx: 100, // x position is always 100\n cy: api.coord([0, api.value(0)])[1],\n r: 30\n },\n style: {\n fill: 'blue'\n }\n };\n },\n encode: {\n // Then the series will not be controlled\n // by x axis and corresponding dataZoom.\n x: -1,\n y: 1\n },\n data: [ ... ]\n }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data should be the two-dimensional array shown as follow.</p>\n<pre><code class=\"lang-javascript\">[\n [2320.26, 2320.26, 2287.3, 2362.94],\n [2300, 2291.3, 2288.26, 2308.38],\n { // the data item could also be an Object, so that it could contains special settings for this data item.\n value: [2300, 2291.3, 2288.26, 2308.38],\n itemStyle: {...}\n },\n ...\n]\n</code></pre>\n<p>Every data item (each line in the example above) represents a box, which contains 4 values. They are:</p>\n<pre><code class=\"lang-javascript\">[open, close, lowest, highest] (namely: [opening value, closing value, lowest value, highest value])\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>Value of data item.</p>\n<pre><code class=\"lang-javascript\">[open, close, lowest, highest] (namely: [opening value, closing value, lowest value, highest value])\n</code></pre>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of a candle box.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"color0":{"type":["Color"],"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderColor":{"type":["Color"],"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"borderColor0":{"type":["Color"],"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderWidth":{"type":["number"],"description":"<p>Border width of candlestick. There is no border when it is <code>0</code>.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Emphasis style of a candle box.</p>\n","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Fill color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"color0":{"type":["Color"],"description":"<p>Fill color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderColor":{"type":["Color"],"description":"<p>Border color of bullish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#c23531"},"borderColor0":{"type":["Color"],"description":"<p>Border color of bearish candle stick.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#314656"},"borderWidth":{"type":["number"],"description":"<p>Border width of candlestick. There is no border when it is <code>0</code>.</p>\n","default":2},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-candlestick.markPoint.data.x\">x</a>, <a href=\"#series-candlestick.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-candlestick.markPoint.data.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-candlestick.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-candlestick.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-candlestick.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'maximum',\n type: 'max'\n }, \n {\n name: 'coordinate',\n coord: [10, 20]\n }, {\n name: 'fixed x position',\n yAxis: 10,\n x: '90%'\n }, \n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> maximum value.</li>\n<li><code>'max'</code> minimum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-candlestick.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code>0</code> (xAxis, radiusAxis), <code>1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-candlestick.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-candlestick.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-candlestick.markLine.data.0.x\">x</a>, <a href=\"#series-candlestick.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-candlestick.markLine.data.0.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-candlestick.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-candlestick.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-candlestick.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code>xAxis</code> or <code>yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code>type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code>valueIndex</code>.</p>\n<pre><code>data: [\n {\n name: 'average line',\n // 'average', 'min', and 'max' are supported\n type: 'average'\n },\n {\n name: 'Horizontal line with Y value at 100',\n yAxis: 100\n },\n [\n {\n // Use the same name with starting and ending point\n name: 'Minimum to Maximum',\n type: 'min'\n },\n {\n type: 'max'\n }\n ],\n [\n {\n name: 'Markline between two points',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [{\n // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n yAxis: 'max',\n x: '90%'\n }, {\n type: 'max'\n }],\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-candlestick.markArea.data.0.x\">x</a>, <a href=\"#series-candlestick.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-candlestick.markArea.data.0.coord\">coord</a>, which can be also set as <code>'min'</code>, <code>'max'</code>, <code>'average'</code> (e.g, <code>coord: [23, 'min']</code>, or <code>coord: ['average', 'max']</code>)。</p>\n</li>\n</ol>\n<ol>\n<li>Locate the point on the min value or max value of <code>series.data</code> using <a href=\"#series-candlestick.markArea.data.0.type\">type</a>, where <a href=\"#series-candlestick.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-candlestick.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code>xAxis</code> or <code>yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n [\n {\n name: 'From average to max',\n type: 'average'\n },\n {\n type: 'max'\n }\n ],\n\n [\n {\n name: 'Mark area between two points in data coordiantes',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [\n {\n name: 'From 60 to 80',\n yAxis: 60\n },\n {\n yAxis: 80\n }\n ], [\n {\n name: 'Mark area covers all data'\n coord: ['min', 'min']\n },\n {\n coord: ['max', 'max']\n }\n ],\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in candlestick.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in candlestick, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"linear"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>heat map</strong></p>\n<p>Heat map mainly use colors to represent values, which must be used along with <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>It can be used in either <a href=\"#grid\">rectangular coordinate</a> or <a href=\"#geo\">geographic coordinate</a>. But the behaviour on them are quite different. Rectangular coordinate must have two catagories to use it.</p>\n<p>Here are the examples using it in rectangular coordinate and geographic coordinate:</p>\n<p><strong>rectangular coordinate: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=heatmap-cartesian&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'heatmap'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-heatmap.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-heatmap.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'geo'</code></p>\n<p> Use geographic coordinate, with <a href=\"#series-heatmap.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"blurSize":{"type":["number"],"description":"<p>Blur size of each data point. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of 'geo' value.</p>\n","default":20},"minOpacity":{"type":["number"],"description":"<p>Minimum opacity. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of 'geo' value.</p>\n","default":0},"maxOpacity":{"type":["number"],"description":"<p>Maximum opacity. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of 'geo' value.</p>\n","default":1},"progressive":{"type":["number"],"description":"<p><code>progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n","default":400},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, "progressive rendering" is enabled.</p>\n","default":3000},"label":{"type":["Object"],"description":"<p>Work for <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a>: 'cartesian2d'.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Work for <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a>: 'cartesian2d'.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code>data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code>data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code>series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each colum is named as a "dimension".</p>\n<pre><code class=\"lang-js\">series: [{\n data: [\n // dimX dimY other dimensions ...\n [ 3.4, 4.5, 15, 43],\n [ 4.2, 2.3, 20, 91],\n [ 10.8, 9.5, 30, 18],\n [ 7.2, 8.8, 18, 57]\n ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, "dimX" and "dimY" correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> repectively.</li>\n<li>In <a href=\"#polar\">polar</a> "dimX" and "dimY" correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> repectively.</li>\n<li>Other dimensions are optional, which can be used in other place. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to viusal (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code>'category'</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n // Each item corresponds to each item in xAxis.data.\n data: [23, 44, 55, 19]\n // In fact, it is the simplification of the format below:\n // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between "value" and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code>'value'</code> or <code>'log'</code>):</p>\n<p> The value can be a <code>number</code> (like <code>12</code>) (can also be a number in a <code>string</code> format, like <code>'12'</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code>'category'</code>):</p>\n<p> The value should be the ordinal of the axis.data (based on <code>0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\"> xAxis: {\n type: 'category',\n data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n },\n yAxis: {\n type: 'category',\n data: ['a', 'b', 'm', 'n', 'p', 'q']\n },\n series: [{\n data: [\n // xAxis yAxis\n [ 0, 0, 2 ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n [ 'Thursday', 2, 1 ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n [ 2, 'p', 2 ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n [ 3, 3, 5 ]\n ]\n }]\n</code></pre>\n<p> There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code>'time'</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code>1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code>'2012-03'</code>, <code>'2012-03-01'</code>, <code>'2012-03-01 05'</code>, <code>'2012-03-01 05:06'</code>.</li>\n<li>separated by <code>"T"</code> or a space: <code>'2012-03-01T12:22:33.123'</code>, <code>'2012-03-01 12:22:33.123'</code>.</li>\n<li>timezone specified: <code>'2012-03-01T12:22:33Z'</code>, <code>'2012-03-01T12:22:33+8000'</code>, <code>'2012-03-01T12:22:33-05:00'</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code>'2012'</code>, <code>'2012-3-1'</code>, <code>'2012/3/1'</code>, <code>'2012/03/01'</code>,\n<code>'2009/6/12 2:00'</code>, <code>'2009/6/12 2:05:08'</code>, <code>'2009/6/12 2:05:08.123'</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code>new Date('2012-01-01')</code> is treated as a Jan 1st 2012 in UTC, while <code>new Date('2012-1-1')</code> and <code>new Date('2012/01/01')</code> are treated as Jan 1st 2012 in local timezone. In safari <code>new Date('2012-1-1')</code> is not supported.</li>\n<li>So if you intent to perform <code>new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code>echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code>value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n 12,\n 24,\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n 33\n]\n// Or\n[\n [12, 332],\n [24, 32],\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code>'-'</code> or <code>null</code> or <code>undefined</code> or <code>NaN</code> can be used to describe that a data item is not exists (ps：<em>not exist</em> does not means its value is <code>0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"value":{"type":["Array"],"description":"<p>Value of data item.</p>\n"},"label":{"type":["Object"],"description":"<p>It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of 'cartesian2d' value.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of a single data point. It is valid with <a href=\"#series-heatmap.coordinateSystem\">coordinateSystem</a> of 'cartesian2d' value.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-heatmap.markPoint.data.x\">x</a>, <a href=\"#series-heatmap.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-heatmap.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-heatmap.markLine.data.0.x\">x</a>, <a href=\"#series-heatmap.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-heatmap.markArea.data.0.x\">x</a>, <a href=\"#series-heatmap.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in heatmap.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in heatmap, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Map.</strong></p>\n<p>Map is maily used in the visulization of geographic area data, which can be used with <a href=\"#visualMap\">visualMap</a> component to visualize the datas such as population distribution density in diffrent areas.</p>\n<p>Series of same <a href=\"#series-map.map\">map type</a> will show in one map. At this point, the configuration of the first series will be used for the map configuration.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'map'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"map":{"type":["string"],"description":"<p>Map charts.</p>\n<p>Due to the increase of fineness of map, ECharts 3 doesn't include map data by default for package size consideration. You may find map files you need on <a href=\"http://ecomfe.github.io/echarts-builder-web/map3.html\" target=\"_blank\">map download page</a> and then include and register them in ECharts.</p>\n<p>Two formats of map data are provided in ECharts, one of which can be included in <code><script></code> tag as JavaScript file, and the other of is in JSON format and should be loaded using AJAX. Map name and data will be loaded automatically once the JavaScript file is loaded, while in the JSON form, you have to assign name explicitly.</p>\n<p>Here are examples of these two types:</p>\n<p><strong> JavaScript importing example </strong></p>\n<pre><code class=\"lang-html\"><script src="echarts.js"></script>\n<script src="map/js/china.js"></script>\n<script>\nvar chart = echarts.init(document.getElmentById('main'));\nchart.setOption({\n series: [{\n type: 'map',\n map: 'china'\n }]\n});\n</script>\n</code></pre>\n<p><strong> JSON importing example </strong></p>\n<pre><code class=\"lang-js\">$.get('map/json/china.json', function (chinaJson) {\n echarts.registerMap('china', chinaJson);\n var chart = echarts.init(document.getElmentById('main'));\n chart.setOption({\n series: [{\n type: 'map',\n map: 'china'\n }]\n });\n});\n</code></pre>\n<p>ECharts uses <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> format as map outline. Besides the methods introduced above, you can also get <a href=\"http://geojson.org/\" target=\"_blank\">geoJSON</a> data through in other methods if you like and register it in ECharts. Reference to <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a> for more information.</p>\n","default":"''"},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable mouse zooming and translating. <code>false</code> by default. If either zooming or translating is wanted, it can be set to <code>'scale'</code> or <code>'move'</code>. Otherwise, set it to be <code>true</code> to enable both.</p>\n","default":false},"center":{"type":["Array"],"description":"<p>Center of current view-port, in longitude and latitude.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">center: [115.97, 29.71]\n</code></pre>\n"},"aspectScale":{"type":["number"],"description":"<p>Used to scale aspect of geo.</p>\n<p>The final aspect is calculated by: <code>geoBoundingRect.width / geoBoundingRect.height * aspectScale</code>.</p>\n","default":0.75},"boundingCoords":{"type":["Array"],"description":"<p>Two dimension array. Define coord of left-top, right-bottom in layout box.</p>\n<pre><code class=\"lang-js\">// A complete world map\nmap: 'world',\nleft: 0, top: 0, right: 0, bottom: 0,\nboundingCoords: [\n // [lng, lat] of left-top corner\n [-180, 90],\n // [lng, lat] of right-bottom corner\n [180, -90]\n],\n</code></pre>\n","default":null},"zoom":{"type":["number"],"description":"<p>Zoom rate of current view-port.</p>\n","default":1},"scaleLimit":{"type":["Object"],"description":"<p>Limit of scaling, with <code>min</code> and <code>max</code>. <code>1</code> by default.</p>\n","properties":{"min":{"type":["number"],"description":"<p>Minimum scaling</p>\n"},"max":{"type":["number"],"description":"<p>Maximum scaling</p>\n"}}},"nameMap":{"type":["Object"],"description":"<p>Name mapping for customized areas. For example:</p>\n<pre><code class=\"lang-js\">{\n 'China' : '中国'\n}\n</code></pre>\n"},"selectedMode":{"type":["boolean","string"],"description":"<p>Selected mode decides whether multiple selecting is supported. By default, <code>false</code> is used for disabling selection. Its value can also be <code>'single'</code> for selecting single area, or <code>'multiple'</code> for selecting multiple areas.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of Map Area Border, <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Area filling color.</p>\n","default":"'#eee'","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"<p>Map area style in highlighted state.</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Area filling color.</p>\n","default":"'#eee'"},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"top":{"type":["string","number"],"description":"<p>Distance between component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'auto'"},"right":{"type":["string","number"],"description":"<p>Distance between component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"layoutCenter":{"type":["Array"],"description":"<p><code>layoutCenter</code> and <code>layoutSize</code> provides layout strategy other than <code>left/right/top/bottom/width/height</code>.</p>\n<p>When using <code>left/right/top/bottom/width/height</code>, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, <code>layoutCenter</code> attribute can be used to define the center position of map, and <code>layoutSize</code> can be used to define the size of map. For example:</p>\n<pre><code class=\"lang-js\">layoutCenter: ['30%', '30%'],\n// If width-height ratio is larger than 1, then width is set to be 100.\n// Otherwise, height is set to be 100.\n// This makes sure that it will not exceed the area of 100x100\nlayoutSize: 100\n</code></pre>\n<p>After setting these two values, <code>left/right/top/bottom/width/height</code> becomes invalid.</p>\n","default":null},"layoutSize":{"type":["number","string"],"description":"<p>Size of map, see <code>layoutCenter</code> for more information. Percentage relative to screen width, and absolute pixel values are supported.</p>\n"},"geoIndex":{"type":["number"],"description":"<p>In default case, map series create exclusive <code>geo</code> component for themselves. But <code>geoIndex</code> can be used to specify an outer <a href=\"#geo\">geo component</a>, which can be shared with other series like <a href=\"#series-pie\">pie</a>. Moreover, the region color of the outer <a href=\"#geo\">geo component</a> can be controlled by the map series (via <a href=\"#visualMap\">visualMap</a>).</p>\n<p>When <code>geoIndex</code> specified, <a href=\"#series-map.map\">series-map.map</a> other style configurations like <a href=\"#series-map.itemStyle\">series-map.itemStyle</a> will not work, but cooresponding configurations in <a href=\"#geo\">geo component</a> will be used.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=geo-map-scatter&reset=1&edit=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n","default":null},"mapValueCalculation":{"type":["string"],"description":"<p>Value of multiple series with the same <a href=\"#series-map.map\">map type</a> can use this option to get a statistical value.</p>\n<p>Supported statistical methods:</p>\n<ul>\n<li><code>'sum'</code></li>\n<li><code>'average'</code></li>\n<li><code>'max'</code></li>\n<li><code>'min'</code></li>\n</ul>\n","default":"'sum'"},"showLegendSymbol":{"type":["boolean"],"description":"<p>Show the symbol in related area (dot of series symbol). Available when <a href=\"#legend\">legend</a> component exists.</p>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code>seriesLayoutBy</code> specifies whether the column or the row of <code>dataset</code> is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:</p>\n<ul>\n<li>'column': by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>'row'：the rows of <code>dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code>dataset</code>. <code>datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of map series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each arrary item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n // name of date item\n name: 'data1',\n // value of date item is 8\n value: 10\n}, {\n name: 'data2',\n value: 20\n}]\n</code></pre>\n<p>Each data item can be further custerized:</p>\n<pre><code class=\"lang-js\">[{\n name: 'data1',\n value: 10\n}, {\n // name of data item\n name: 'data2',\n value : 56,\n // user-defined label format that only useful for this data item\n label: {},\n // user-defined special itemStyle that only useful for this data item\n itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of the map area where the data belongs to, such as <code>'China'</code> or <code>'United Kingdom'</code> .</p>\n"},"value":{"type":["number"],"description":"<p>The numerical value of this area.</p>\n"},"selected":{"type":["boolean"],"description":"<p>Whether the are selected.</p>\n","default":false},"itemStyle":{"type":["Object"],"description":"<p>Style of item polygon</p>\n","properties":{"areaColor":{"type":["Color"],"description":"<p>Color of the area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'bottom'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"areaColor":{"type":["Color"],"description":""},"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-map.markPoint.data.x\">x</a>, <a href=\"#series-map.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-map.markPoint.data.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'coordinate',\n coord: [10, 20]\n }, {\n name: 'fixed x position',\n yAxis: 10,\n x: '90%'\n }, \n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-map.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code>0</code> (xAxis, radiusAxis), <code>1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-map.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-map.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-map.markLine.data.0.x\">x</a>, <a href=\"#series-map.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-map.markLine.data.0.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n [\n {\n name: 'Markline between two points',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [{\n // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n yAxis: 'max',\n x: '90%'\n }, {\n type: 'max'\n }],\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-map.markArea.data.0.x\">x</a>, <a href=\"#series-map.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-map.markArea.data.0.coord\">coord</a>, which can be also set as <code>'min'</code>, <code>'max'</code>, <code>'average'</code> (e.g, <code>coord: [23, 'min']</code>, or <code>coord: ['average', 'max']</code>)。</p>\n</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n [\n {\n name: 'Mark area between two points in data coordiantes',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [\n {\n name: 'From 60 to 80',\n yAxis: 60\n },\n {\n yAxis: 80\n }\n ], [\n {\n name: 'Mark area covers all data'\n coord: ['min', 'min']\n },\n {\n coord: ['max', 'max']\n }\n ],\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p>The series in parallel coordinate system.</p>\n<p><br></p>\n<hr>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href=\"https://en.wikipedia.org/wiki/Parallel_coordinates\" target=\"_blank\">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n [1, 55, 9, 56, 0.46, 18, 6, 'good'],\n [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],\n [3, 56, 7, 63, 0.3, 14, 5, 'good'],\n [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],\n { // Data item can also be an Object, so that perticular settings of its line can be set here.\n value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']\n lineStyle: {...},\n }\n ...\n]\n</code></pre>\n<p>In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".</p>\n<p>Parallel coordinates are much used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/parallel-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<hr>\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class=\"lang-javascript\">option = {\n parallelAxis: [ // Definitions of axes.\n {dim: 0, name: schema[0].text}, // Each axis has a 'dim' attribute, representing dimension index in data.\n {dim: 1, name: schema[1].text},\n {dim: 2, name: schema[2].text},\n {dim: 3, name: schema[3].text},\n {dim: 4, name: schema[4].text},\n {dim: 5, name: schema[5].text},\n {dim: 6, name: schema[6].text},\n {dim: 7, name: schema[7].text,\n type: 'category', // Also supports category data.\n data: ['Excellent', 'good', 'light pollution', 'moderate pollution', 'heavy pollution', 'severe pollution']\n }\n ],\n parallel: { // Definition of a parallel coordinate system.\n left: '5%', // Location of parallel coordinate system.\n right: '13%',\n bottom: '10%',\n top: '20%',\n parallelAxisDefault: { // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n type: 'value',\n nameLocation: 'end',\n nameGap: 20\n }\n },\n series: [ // Here the three series sharing the same parallel coordinate system.\n {\n name: 'Beijing',\n type: 'parallel', // The type of this series is 'parallel'\n data: [\n [1, 55, 9, 56, 0.46, 18, 6, 'good'],\n [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],\n ...\n ]\n },\n {\n name: 'Shanghai',\n type: 'parallel',\n data: [\n [3, 56, 7, 63, 0.3, 14, 5, 'good'],\n [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],\n ...\n ]\n },\n {\n name: 'Guangzhou',\n type: 'parallel',\n data: [\n [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],\n [5, 42, 24, 44, 0.76, 40, 16, 'excellent'],\n ...\n ]\n }\n ]\n};\n</code></pre>\n<p>Three components are involved here: <a href=\"#parallel\">parallel</a>, <a href=\"#parallelAxis\">parallelAxis</a>, <a href=\"#series-parallel\">series-parallel</a></p>\n<ul>\n<li><p><a href=\"#parallel\">parallel</a></p>\n<p> This component is the coordinate system. One or more series (like "Beijing", "Shanghai", and "Guangzhou" in the above example) can share one coordinate system.</p>\n<p> Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p> Position setting is also carried out here.</p>\n</li>\n<li><p><a href=\"#parallelAxis\">parallelAxis</a></p>\n<p> This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p> <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href=\"#series-parallel\">series-parallel</a></p>\n<p> This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p> <a href=\"#parallelAxis.parallelIndex\">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href=\"#parallelAxis\">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href=\"#parallel.parallelAxisDefault\">parallel.parallelAxisDefault</a> will be merged into <a href=\"#parallelAxis\">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href=\"#series-parallel.lineStyle.width\">series-parallel.lineStyle.width</a> to be <code>0.5</code> (or less), which may improve performance significantly.</p>\n<p><br></p>\n<hr>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href=\"#parallel.axisExpandable\">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=map-parallel-prices&edit=1&reset=1\" width=\"600\" height=\"460\" ></iframe>\n\n\n\n\n\n\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'parallel'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>'parallel'</code></p>\n<p> Use parallel coordinates, with <a href=\"#series-parallel.parallelIndex\">parallelIndex</a> to assign the corresponding parallel coordinate components.</p>\n</li>\n</ul>\n","default":"'parallel'"},"parallelIndex":{"type":["number"],"description":"<p>Index of <a href=\"#parallel\">parallel coordinates</a> to combine with, which is useful for multiple parallel axes in one chart.</p>\n","default":0},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>Line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.45}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.45}}}}},"inactiveOpacity":{"type":["number"],"description":"<p>When perform brush selection, the unselected lines will be set as this transparency rate (which could darken those lines).</p>\n","default":0.05},"activeOpacity":{"type":["number"],"description":"<p>When perform brush selection, the selected lines will be set as this transparency rate (which could highlight those lines).</p>\n","default":1},"realtime":{"type":["boolean"],"description":"<p>Whether to update view in realtime.</p>\n","default":true},"smooth":{"type":["boolean","number"],"description":"<p>Whether to smooth the line. It defaults to be <code>false</code> and can be set as <code>true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n","default":false},"progressive":{"type":["number"],"description":"<p><code>progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n","default":500},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, "progressive rendering" is enabled.</p>\n","default":3000},"progressiveChunkMode":{"type":["string"],"description":"<p>Chunk approach, optional values:</p>\n<ul>\n<li><code>'sequential'</code>: slice data by data index.</li>\n<li><code>'mod'</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n","default":"sequential"},"data":{"type":["Array"],"description":"<p>For example, <a href=\"#series-parallel.data\">series-parallel.data</a> is the following data:</p>\n<pre><code class=\"lang-javascript\">[\n [1, 55, 9, 56, 0.46, 18, 6, 'good'],\n [2, 25, 11, 21, 0.65, 34, 9, 'excellent'],\n [3, 56, 7, 63, 0.3, 14, 5, 'good'],\n [4, 33, 7, 29, 0.33, 16, 6, 'excellent'],\n { // Data item can also be an Object, so that perticular settings of its line can be set here.\n value: [5, 42, 24, 44, 0.76, 40, 16, 'excellent']\n lineStyle: {...},\n }\n ...\n]\n</code></pre>\n<p>In data above, each row is a "data item", and each column represents a "dimension". For example, the meanings of columns above are: "data", "AQI", "PM2.5", "PM10", "carbon monoxide level", "nitrogen dioxide level", and "sulfur dioxide level".</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of a data item.</p>\n"},"value":{"type":["Array"],"description":"<p>The value of a data item.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>Line style.</p>\n"},"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.45},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.45}}}}}}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in parallel.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in parallel, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"linear"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Lines graph</strong></p>\n<p>It is used to draw the line data with the information about "from" and "to"; and it is applied fot drawing the air routes on map, which visualizes these routes.</p>\n<p>ECharts 2.x uses the <code>markLine</code> to draw the migrating effect, while in ECharts 3, the <code>lines</code> graph is recommended to be used.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'lines'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-lines.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-lines.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'geo'</code></p>\n<p> Use geographic coordinate, with <a href=\"#series-lines.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n","default":"'geo'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"polyline":{"type":["boolean"],"description":"<p>If draw as polyline.</p>\n<p>Default to be <code>false</code>. Can only draw a two end straight line.</p>\n<p>If it is set true, <a href=\"#series-lines.data.coords\">data.coords</a> can have more than two coord to draw a polyline. It is useful when visualizing GPS track data. See example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-bus\" target=\"_blank\">lines-bus</a>.</p>\n","default":false},"effect":{"type":["Object"],"description":"<p>The setting about special effect of lines.</p>\n<p><strong>Tips: </strong>All the graphs with trail effect should be put on a individual layer, which means that <a href=\"#series-lines.zlevel\">zlevel</a> need to be different with others. And the animation (<a href=\"#series-lines.animation\">animation</a>: false) of this layer is suggested to be turned off at the meanwhile. Otherwise, other graphic elements in other series and the <a href=\"#series-lines.label\">label</a> of animation would produce unnecessary ghosts.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show special effect.</p>\n","default":false},"period":{"type":["number"],"description":"<p>The duration of special effect, which unit is second.</p>\n","default":4},"delay":{"type":["number","Function"],"description":"<p>Effect animation delay. Can be number or callback function.</p>\n"},"constantSpeed":{"type":["number"],"description":"<p>If symbol movement of special effect has a constant speed, which unit is pixel per second. <a href=\"#series-lines.effect.period\">period</a> will be ignored if <code>constantSpeed</code> is larger than 0.</p>\n","default":0},"symbol":{"type":["string"],"description":"<p>The symbol of special effect.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>The above example uses a custom path of plane shape.</p>\n<p><strong>Tip:</strong> Ahe angle of symbol changes as the tangent of track changes. If you use a custom path, you should make sure that the path shape are upward oriented. It would ensure that the symbol will always move toward the right moving direction when the symbol moves along the track.</p>\n","default":"'circle'"},"symbolSize":{"type":["Array","number"],"description":"<p>The symbol size of special effect, which could be set as single number such as <code>10</code>. What's more, arrays could be used to decribe the width and height respectively. For instance, <code>[20, 10]</code> indicates <code>20</code> for width and <code>10</code> for height.</p>\n","default":3},"color":{"type":["Color"],"description":"<p>The color of special effect symbol, which defaults to be same with <a href=\"#series-lines.lineStyle.color\">lineStyle.color</a>.</p>\n"},"trailLength":{"type":["number"],"description":"<p>The length of trail of special effect. The values from 0 to 1 could be set. Trail would be longer as the the value becomes larger.</p>\n","default":0.2},"loop":{"type":["boolean"],"description":"<p>Whether to loop the special effect animation.</p>\n","default":true}}},"large":{"type":["boolean"],"description":"<p>Whether to enable the optimization of large-scale lines graph. It could be enabled when there is a particularly large number of data(>=5k) .</p>\n<p>After being enabled, <a href=\"#series-lines.largeThreshold\">largeThreshold</a> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>The style of a single data item can't be customized</p>\n","default":true},"largeThreshold":{"type":["number"],"description":"<p>The threshold enabling the drawing optimization.</p>\n","default":2000},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-line.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n","default":"'none'"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n","default":10},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) => Color\n</code></pre>\n<p>Input parameters are <code>seriesIndex</code>, <code>dataIndex</code>, <code>data</code>, <code>value</code>, and etc. of data item.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'self-adaptive'"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.5},"curveness":{"type":["number"],"description":"<p>The curveness of edge. The values from 0 to 1 could be set. The curveness would be larger as the the value becomes larger.</p>\n","default":0}}},"label":{"type":["Object"],"description":"<p>Label settings. Does not work when <a href=\"#series-lines.polyline\">polyline</a> is <code>true</code>.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string"],"description":"<p>the position of label, options:</p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"<p>Emphasis style.</p>\n","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string"],"description":"<p>the position of label, options:</p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"progressive":{"type":["number"],"description":"<p><code>progressive</code> specifies the amount of graphic elements that can be rendered within a frame (about 16ms) if "progressive rendering" enabled.</p>\n<p>When data amount is from thousand to more than 10 million, it will take too long time to render all of the graphic elements. Since ECharts 4, "progressive rendering" is supported in its workflow, which processes and renders data chunk by chunk alone with each frame, avoiding to block the UI thread of the browser.</p>\n","default":400},"progressiveThreshold":{"type":["number"],"description":"<p>If current data amount is over the threshold, "progressive rendering" is enabled.</p>\n","default":3000},"data":{"type":["Array"],"description":"<p>The data set of lines.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>the name of data.</p>\n"},"coords":{"type":["Array"],"description":"<p>An array includes two ore more than two coordinates. Each coordinate could be <code>[x, y]</code> in <a href=\"#grid\">rectangular coordinate</a> and <code>[lng, lat]</code> in <a href=\"#geo\">geographic coordinate</a>.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>The line style of this data item.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string"],"description":"<p>the position of label, options:</p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string"],"description":"<p>the position of label, options:</p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-lines.markPoint.data.x\">x</a>, <a href=\"#series-lines.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-lines.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-lines.markLine.data.0.x\">x</a>, <a href=\"#series-lines.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-lines.markArea.data.0.x\">x</a>, <a href=\"#series-lines.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in lines graph.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in lines graph, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},{"type":["Object"],"description":"<p><strong>relation graph</strong></p>\n<p>Graph is a diagram to represent <a href=\"#series-graph.nodes\">nodes</a> and the <a href=\"#series-graph.links\">links</a> connecting nodes.</p>\n<p><strong>Tips: </strong> In ECharts 2.x , the diagram of <code>force</code> type will not be available in ECharts 3 any more, which has been changed to use <code>graph</code> to show graph data. If you want to use force to lead the layout, you can set the <a href=\"#series-graph.layout\">layout</a> configuration as <code>'force'</code>.</p>\n<p><strong>Example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=graph&reset=1&edit=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'graph'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>null</code> or <code>'none'</code></p>\n<p> No coordinate.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-graph.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-graph.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'polar'</code></p>\n<p> Use polar coordinates, with <a href=\"#series-graph.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'geo'</code></p>\n<p> Use geographic coordinate, with <a href=\"#series-graph.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'none'</code></p>\n<p> Do not use coordinate system.</p>\n</li>\n</ul>\n","default":null},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable the highlight animation effect of mousr hover node.</p>\n"},"layout":{"type":["string"],"description":"<p>Graph layout.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code>'none'</code> No any layout, use <a href=\"#series-graph.data.x\">x</a>, <a href=\"#series-graph.data.y\">y</a> provided in <a href=\"#series-graph.data\">node</a> as the position of node.</p>\n</li>\n<li><p><code>'circular'</code> Adopt circular layout, see the example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=graph-circular-layout\" target=\"_blank\">Les Miserables</a>.</p>\n</li>\n<li><p><code>'force'</code> Adopt force-directed layout, see the example <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=graph-force\" target=\"_blank\">Force</a>, the detail about configrations of layout are in <a href=\"#series-graph.force\">graph.force</a></p>\n</li>\n</ul>\n","default":"'none'"},"circular":{"type":["Object"],"description":"<p>Configuration about circular layout.</p>\n","properties":{"rotateLabel":{"type":["boolean"],"description":"<p>Whether to rotate the label automatically.</p>\n","default":false}}},"force":{"type":["Object"],"description":"<p>Configuration items about force-directed layout. Force-directed layout simulates spring/charge model, which will add a repulsion between 2 nodes and add a attraction between 2 nodes of each edge. In each iteration nodes will move under the effect of repulsion and attraction. After several iterations, the nodes will be static in a balanced position. As a result, the energy local minimum of this whole model will be realized.</p>\n<p>The result of force-directed layout has a good symmetries and clustering, which is also aesthetically pleasing.</p>\n","properties":{"initLayout":{"type":["string"],"description":"<p>The initial layout before force-directed layout, which will influence on the result of force-directed layout.</p>\n<p>It defaults not to do any layout and use <a href=\"#series-graph.data.x\">x</a>, <a href=\"#series-graph.data.y\">y</a> provided in <a href=\"#series-graph.data\">node</a> as the position of node. If it doesn't exist, the position will be generated randomly.</p>\n<p>You can also use circular layout <code>'circular'</code>.</p>\n"},"repulsion":{"type":["Array","number"],"description":"<p>The repulsion factor between nodes. The repulsion will be stronger and the distance between 2 nodes becomes further as this value becomes larger.</p>\n<p>It can be an array to represent the range of repulsion. In this case larger value have larger repulsion and smaller value will have smaller repulsion.</p>\n","default":50},"gravity":{"type":["number"],"description":"<p>The gravity factor enforcing nodes approach to the center. The nodes will be closer to the center as the value becomes larger.</p>\n","default":0.1},"edgeLength":{"type":["Array","number"],"description":"<p>The distance between 2 nodes on edge. This distance is also affected by <a href=\"#series-graph.force.repulsion\">repulsion</a>.</p>\n<p>It can be an array to represent the range of edge length. In this case edge with larger value will be shorter, which means two nodes are closer. And edge with smaller value will be longer.</p>\n","default":30},"layoutAnimation":{"type":["boolean"],"description":"<p>Because the force-directed layout will be steady after several iterations, this parameter will be decide whether to show the iteration animation of layout. It is not recommended to be closed on browser when there are a lot of node data (>100) as the layout process will cause browser to hang.</p>\n","default":true}}},"roam":{"type":["boolean","string"],"description":"<p>Whether to enable mouse zooming and translating. <code>false</code> by default. If either zooming or translating is wanted, it can be set to <code>'scale'</code> or <code>'move'</code>. Otherwise, set it to be <code>true</code> to enable both.</p>\n","default":false},"nodeScaleRatio":{"type":["number"],"description":"<p>Related zooming ratio of nodes when mouse zooming in or out. When it is set as 0, the node will not zoom as the mouse zooms.</p>\n","default":0.6},"draggable":{"type":["boolean"],"description":"<p>If node is draggable. Only available when using force-directed layout.</p>\n","default":false},"symbol":{"type":["string","Function"],"description":"<p>Symbol of node of relation graph.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'circle'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p>node of relation graph symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":10},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of node of relation graph symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of node of relation graph symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"focusNodeAdjacency":{"type":["boolean"],"description":"<p>Whether to focus/highlight the hover node and it's adjacencies.</p>\n","default":false},"edgeSymbol":{"type":["Array","string"],"description":"<p>Symbol of two ends of edge line.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">edgeSymbol: ['circle', 'arrow']\n</code></pre>\n","default":"['none', 'none']"},"edgeSymbolSize":{"type":["Array","number"],"description":"<p>Size of symbol of two ends of edge line. Can be an array or a single number.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">// Start symbol has size 5 and end symbol has size 10\nsymbolSize: [5, 10],\n// All has size 10\nsymbolSize: 10\n</code></pre>\n","default":10},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) => Color\n</code></pre>\n<p>Input parameters are <code>seriesIndex</code>, <code>dataIndex</code>, <code>data</code>, <code>value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>The style of edge line. <a href=\"#series-graph.lineStyle.color\">lineStyle.color</a> can be <code>'source'</code> or <code>'target'</code>, which will use the color of source node or target node.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"'#aaa'"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n","default":0.5},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>If show label on edge.</p>\n","default":false},"position":{"type":["string"],"description":"<p>Label position, options：</p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"edgeLabel":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>If show label on edge.</p>\n","default":false},"position":{"type":["string"],"description":"<p>Label position, options：</p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"categories":{"type":["Array"],"description":"<p>The categories of node, which is optional.\nIf there is a classification of nodes, the category of each node can be assigned through <a href=\"#series-graph.data.category\">data[i].category</a>. And the style of category will also be applied to the style of nodes. <code>categories</code> can also be used in <a href=\"#legend\">legend</a>.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of category, which is used to correspond with <a href=\"#legend\">legend</a> and the content of <a href=\"#tooltip\">tooltip</a>.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of node of this category.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>node of this category symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of node of this category symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of node of this category symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>The style of node in this category.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The label style of node in this category.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"data":{"type":["Array"],"description":"<p>Nodes list of graph.</p>\n<pre><code class=\"lang-js\">data: [{\n name: '1',\n x: 10,\n y: 10,\n value: 10\n}, {\n name: '2',\n x: 100,\n y: 100,\n value: 20,\n symbolSize: 20,\n itemStyle: {\n color: 'red'\n }\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"x":{"type":["number"],"description":"<p><code>x</code> value of node position.</p>\n"},"y":{"type":["number"],"description":"<p><code>y</code> value of node position.</p>\n"},"fixed":{"type":["boolean"],"description":"<p>If node are fixed when doing force directed layout.</p>\n"},"value":{"type":["number","Array"],"description":"<p>Value of data item.</p>\n"},"category":{"type":["number"],"description":"<p>Index of category which the data item belongs to.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of node of this category.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>node of this category symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of node of this category symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of node of this category symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>The style of this node.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The label style of this node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"nodes":{"type":["Array"],"description":"<p>Alias of <a href=\"#series-graph.data\">data</a></p>\n"},"links":{"type":["Array"],"description":"<p>Relational data between nodes. Example:</p>\n<pre><code class=\"lang-js\">links: [{\n source: 'n1',\n target: 'n2'\n}, {\n source: 'n2',\n target: 'n3'\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"source":{"type":["string"],"description":"<p><a href=\"#series-graph.data.name\">name of source node</a> on edge</p>\n"},"target":{"type":["string"],"description":"<p><a href=\"#series-graph.data.name\">name of target node</a> on edge</p>\n"},"value":{"type":["number"],"description":"<p>value of edge, can be mapped to edge length in force graph.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>Line style of edges.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>The curveness of edge, supporting values from 0 to 1. The curveness will be larger as the value becomes lager.</p>\n","default":0}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>If show label on edge.</p>\n","default":false},"position":{"type":["string"],"description":"<p>Label position, options：</p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>If show label on edge.</p>\n","default":false},"position":{"type":["string"],"description":"<p>Label position, options：</p>\n<ul>\n<li><code>'start'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'end'</code></li>\n</ul>\n","default":"'middle'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"symbol":{"type":["Array","string"],"description":"<p>Symbol of edge ends. Can be an array with two item to specify two ends, or a string specifies both ends.</p>\n"},"symbolSize":{"type":["Array","string"],"description":"<p>Symbol size of edge ends. Can be an array with two item to specify two ends, or a string specifies both ends.</p>\n"}}}},"edges":{"type":["Array"],"description":"<p>Alias of <a href=\"#series-graph.links\">links</a></p>\n"},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-graph.markPoint.data.x\">x</a>, <a href=\"#series-graph.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-graph.markPoint.data.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-graph.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-graph.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-graph.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'maximum',\n type: 'max'\n }, \n {\n name: 'coordinate',\n coord: [10, 20]\n }, {\n name: 'fixed x position',\n yAxis: 10,\n x: '90%'\n }, \n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> maximum value.</li>\n<li><code>'max'</code> minimum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-graph.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code>0</code> (xAxis, radiusAxis), <code>1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-graph.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-graph.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-graph.markLine.data.0.x\">x</a>, <a href=\"#series-graph.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-graph.markLine.data.0.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-graph.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-graph.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-graph.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code>xAxis</code> or <code>yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code>type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code>valueIndex</code>.</p>\n<pre><code>data: [\n {\n name: 'average line',\n // 'average', 'min', and 'max' are supported\n type: 'average'\n },\n {\n name: 'Horizontal line with Y value at 100',\n yAxis: 100\n },\n [\n {\n // Use the same name with starting and ending point\n name: 'Minimum to Maximum',\n type: 'min'\n },\n {\n type: 'max'\n }\n ],\n [\n {\n name: 'Markline between two points',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [{\n // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n yAxis: 'max',\n x: '90%'\n }, {\n type: 'max'\n }],\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-graph.markArea.data.0.x\">x</a>, <a href=\"#series-graph.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-graph.markArea.data.0.coord\">coord</a>, which can be also set as <code>'min'</code>, <code>'max'</code>, <code>'average'</code> (e.g, <code>coord: [23, 'min']</code>, or <code>coord: ['average', 'max']</code>)。</p>\n</li>\n</ol>\n<ol>\n<li>Locate the point on the min value or max value of <code>series.data</code> using <a href=\"#series-graph.markArea.data.0.type\">type</a>, where <a href=\"#series-graph.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-graph.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code>xAxis</code> or <code>yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n [\n {\n name: 'From average to max',\n type: 'average'\n },\n {\n type: 'max'\n }\n ],\n\n [\n {\n name: 'Mark area between two points in data coordiantes',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [\n {\n name: 'From 60 to 80',\n yAxis: 60\n },\n {\n yAxis: 80\n }\n ], [\n {\n name: 'Mark area covers all data'\n coord: ['min', 'min']\n },\n {\n coord: ['max', 'max']\n }\n ],\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'center'"},"top":{"type":["string","number"],"description":"<p>Distance between component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"'middle'"},"right":{"type":["string","number"],"description":"<p>Distance between component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"bottom":{"type":["string","number"],"description":"<p>Distance between component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n<p>Adaptive by default.</p>\n","default":"'auto'"},"width":{"type":["string","number"],"description":"<p>Width of component. </p>\n","default":"auto"},"height":{"type":["string","number"],"description":"<p>Height of component. </p>\n","default":"auto"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong> Sankey diagram </strong></p>\n<p>Sankey diagram is a specific type of streamgraphs(can also be seen as a directed acyclic graph). In which the width of each branch is shown proportionally to the flow quantity. These graphs are typically used to visualize energy or material or cost transfers between processes. They can also visualize the energy accounts, material flow accounts on a regional or national level, and also the breakdown of cost of item or services.</p>\n<p><strong>Example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sankey-energy&edit=1&reset=1\" width=\"700\" height=\"580\" ></iframe>\n\n\n\n<p><br>\n<strong>Visual Encoding: </strong></p>\n<p>The Sankey diagram encodes each <code>node</code> of the raw data into a small rectangular. And different nodes are presented in different colors as far as possible. The <code>label</code> next to the small rectangular, which encoding the name of the node.</p>\n<p>In addition, the edge between two small rectangulars in the diagram encoding the <code>link</code> of the raw data. The width of edge is shown proportionally to the <code>value</code> of <code>link</code>.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'sankey'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between sankey component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"5%"},"top":{"type":["string","number"],"description":"<p>Distance between sankey component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"5%"},"right":{"type":["string","number"],"description":"<p>Distance between sankey component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":"20%"},"bottom":{"type":["string","number"],"description":"<p>Distance between sankey component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":"5%"},"width":{"type":["string","number"],"description":"<p>Width of sankey component. </p>\n","default":null},"height":{"type":["string","number"],"description":"<p>Height of sankey component. </p>\n","default":null},"nodeWidth":{"type":["number"],"description":"<p>The node width of rectangle in Sankey diagram.</p>\n","default":20},"nodeGap":{"type":["number"],"description":"<p>The gap between any two regtangles in each column of the Sankey diagram.</p>\n","default":8},"layoutIterations":{"type":["number"],"description":"<p>The iterations of layout, which is used to continuously optimize the positions of nodes in Sankey diagram, decreasing the overlapping between nodes and edges.</p>\n<p>The default iterations of layout: <code>32</code>.</p>\n<p>The test shows that iterations of layout could not be less than the default value.</p>\n","default":32},"orient":{"type":["string"],"description":"<p>The layout direction of the nodes in the Sankey diagram, which can be horizontal from left to right or vertical from top to bottom. The corresponding parameter values are <code>horizontal</code> or <code>vertical</code>.</p>\n","default":"'horizontal'"},"draggable":{"type":["boolean"],"description":"<p>The drag-and-drop interaction of the node, which is enabled by default. After opening, the user can drag any node in the Sankey diagram to any position. To turn this interaction off, simply set the value to <code>false</code>.</p>\n","default":true},"focusNodeAdjacency":{"type":["boolean","string"],"description":"<p>Support when mouse hovering over a node or an edge, the adjacent nodes and edges are also highlighted. Default off, can be manually opened.</p>\n<p>Optional values:</p>\n<ul>\n<li><code>false</code>: When hovering over a node or an edge, only the hovered node or edge is highlighted.</li>\n<li><code>true</code>: the same as <code>'allEdges'</code>.</li>\n<li><code>'allEdges'</code>: When hovering over a node, all of the adjacent edges and nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.</li>\n<li><code>'outEdges'</code>: When hovering over a node, the outcoming edges and its adjacent nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.</li>\n<li><code>'inEdges'</code>: When hovering over a node, the incoming edges and its adjacent nodes are highlighted. When hovering over an edge, the adjacent nodes are highlighted.</li>\n</ul>\n","default":false},"levels":{"type":["Array"],"description":"<p>The setting of each layer of Sankey diagram. Can be set layer by layer, as follows:</p>\n<pre><code class=\"lang-js\">levels: [{\n depth: 0,\n itemStyle: {\n color: '#fbb4ae'\n },\n lineStyle: {\n color: 'source',\n opacity: 0.6\n }\n}, {\n depth: 1,\n itemStyle: {\n color: '#b3cde3'\n },\n lineStyle: {\n color: 'source',\n opacity: 0.6\n }\n}]\n</code></pre>\n<p>You can also only set a certain layer:</p>\n<pre><code class=\"lang-js\">levels: [{\n depth: 3,\n itemStyle: {\n color: '#fbb4ae'\n },\n lineStyle: {\n color: 'source',\n opacity: 0.6\n }\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"depth":{"type":["number"],"description":"<p>Specify which layer is set, value starts from 0.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Specify the node style of the specific layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>Specify the outEdge style of the specific layer. in which <a href=\"#series-sankey.lineStyle.color\">lineStyle.color</a> can be assigned to the value of <code>'source'</code> of <code>'target'</code>, then the OutEdge will automatically take the source node or target node color as its own color.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}}},"label":{"type":["Object"],"description":"<p><code>label</code> describes the text label style in each rectangular node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'right'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>The style of node rectangle in Sankey diagram.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"'#aaa'"},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":1},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"<p>The edge style of Sankey diagram, in which <a href=\"#series-sankey.lineStyle.color\">lineStyle.color</a> can be assigned to the value of <code>'source'</code> of <code>'target'</code>, then the edge will automatically take the source node or target node color as its own color.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}},"data":{"type":["Array"],"description":"<p>The nodes list of the sankey diagram.</p>\n<pre><code class=\"lang-js\">data: [{\n name: 'node1',\n // This attribute decides the layer of the current node.\n depth: 0\n}, {\n name: 'node2',\n depth: 1\n}]\n</code></pre>\n<p><strong>Notice:</strong> The name of the node cannot be repeated.</p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of the node.</p>\n"},"depth":{"type":["number"],"description":"<p>The layer of the node, value starts from 0.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>The style of this node.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The lable style of this node.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"nodes":{"type":["Array"],"description":"<p>Equals to <a href=\"#series-sankey.data\">data</a></p>\n"},"links":{"type":["Array"],"description":"<p>The links between nodes. <strong>Notes: The Sankey diagram theoretically only supports Directed Acyclic Graph(DAG), so please make sure that there is no cycle in the links.</strong> For instance:</p>\n<pre><code class=\"lang-js\">links: [{\n source: 'n1',\n target: 'n2'\n}, {\n source: 'n2',\n target: 'n3'\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"source":{"type":["string"],"description":"<p>The <a href=\"#series-sankey.data.name\">name of source node</a> of edge</p>\n"},"target":{"type":["string"],"description":"<p>The <a href=\"#series-sankey.data.name\">name of target node</a> of edge</p>\n"},"value":{"type":["number"],"description":"<p>The value of edge, which decides the width of edge.</p>\n"},"lineStyle":{"type":["Object"],"description":"<p>The line stlye of edge.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}},"emphasis":{"type":["Object"],"description":"","properties":{"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>The color of the edge in Sankey diagram.</p>\n","default":"\"'#314656'\""},"opacity":{"type":["number"],"description":"<p>The opacity of the edge in Sankey diagram.</p>\n","default":0.2},"curveness":{"type":["number"],"description":"<p>The curveness of the edge in Sankey diagram.</p>\n","default":0.5},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0}}}}}}}},"edges":{"type":["Array"],"description":"<p>Equals to <a href=\"#series-sankey.links\">links</a></p>\n"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"'linear'"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Funnel chart</strong></p>\n<p><strong>sample: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=funnel&reset=1&edit=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'funnel'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"min":{"type":["number"],"description":"<p>The specified minimum value.</p>\n","default":0},"max":{"type":["number"],"description":"<p>The specified maximum value.</p>\n","default":100},"minSize":{"type":["string"],"description":"<p>The mapped width from minimum data value <a href=\"#series-funnel.min\">min</a>.</p>\n<p>It can be absolute pixel and also the percentage of <a href=\"#series-funnel.width\">layout width</a>. If you don't want the graph of minimum value to be a triangle, you can set up this property larger than 0.</p>\n","default":"'0%'"},"maxSize":{"type":["string"],"description":"<p>The mapped width from maximum data value <a href=\"#series-funnel.max\">max</a>.</p>\n<p>It can be absolute pixel and also the percentage of <a href=\"#series-funnel.width\">layout width</a>.</p>\n","default":"'100%'"},"sort":{"type":["string"],"description":"<p>Data sorting, which can be whether <code>'ascending'</code>, <code>'descending'</code>, <code>'none'</code>(in data order) or a function, which is the same as <code>Array.prototype.sort(function (a, b) { ... })</code>;</p>\n","default":"'descending'"},"gap":{"type":["number"],"description":"<p>Gap between each trapezoid.</p>\n","default":0},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"funnelAlign":{"type":["string"],"description":"<p>Horizontal align. Defaults to align center. Can be 'left', 'right', 'center'.</p>\n","default":"'center'"},"label":{"type":["Object"],"description":"<p>Text label of funnel chart, to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"<p>Label position.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code>'left'</code></p>\n<p> Left side of funnel chart. The corresponding trapezoid would be related to through <a href=\"#series-funnel.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right side of funnel chart. The corresponding trapezoid would be related to through <a href=\"#series-funnel.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code>'insideRight'</code></p>\n<p> Right inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code>'insideLeft'</code></p>\n<p> Left inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code>'leftTop'</code></p>\n<p> Top-left of funnel chart.</p>\n</li>\n<li><p><code>'leftBottom'</code></p>\n<p> Bottom-left of funnel chart.</p>\n</li>\n<li><p><code>'rightTop'</code></p>\n<p> Top-right side of funnel chart.</p>\n</li>\n<li><p><code>'rightBottom'</code></p>\n<p> Bottom-right side of funnel chart.</p>\n</li>\n<li><p><code>'inner'</code> equals to <code>'inside'</code>.</p>\n</li>\n<li><code>'center'</code> equals to <code>'inside'</code>.</li>\n</ul>\n","default":"'outside'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // percentage\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"<p>The visual guide line style of label. When <a href=\"#series-funnel.label.position\">label position</a> is set as <code>'left'</code>or<code>'right'</code>, the visual guide line will show.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show visual guide line.</p>\n"},"length":{"type":["number"],"description":"<p>The length of the first part from visual guide line.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color","Function"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n<p>Supports callback functions, in the form of:</p>\n<pre><code class=\"lang-js\">(params: Object) => Color\n</code></pre>\n<p>Input parameters are <code>seriesIndex</code>, <code>dataIndex</code>, <code>data</code>, <code>value</code>, and etc. of data item.</p>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // percentage\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show visual guide line.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code>seriesLayoutBy</code> specifies whether the column or the row of <code>dataset</code> is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:</p>\n<ul>\n<li>'column': by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>'row'：the rows of <code>dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code>dataset</code>. <code>datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each arrary item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n // name of date item\n name: 'data1',\n // value of date item is 8\n value: 10\n}, {\n name: 'data2',\n value: 20\n}]\n</code></pre>\n<p>Each data item can be further custerized:</p>\n<pre><code class=\"lang-js\">[{\n name: 'data1',\n value: 10\n}, {\n // name of data item\n name: 'data2',\n value : 56,\n // user-defined label format that only useful for this data item\n label: {},\n // user-defined special itemStyle that only useful for this data item\n itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>the name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>data value.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"<p>The label configuration of a single data item.</p>\n","properties":{"show":{"type":["boolean"],"description":"","default":false},"position":{"type":["string"],"description":"<p>Label position.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code>'left'</code></p>\n<p> Left side of funnel chart. The corresponding trapezoid would be related to through <a href=\"#series-funnel.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right side of funnel chart. The corresponding trapezoid would be related to through <a href=\"#series-funnel.labelLine\">visual guide line</a>.</p>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code>'insideRight'</code></p>\n<p> Right inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code>'insideLeft'</code></p>\n<p> Left inside the trapezoid of funnel chart.</p>\n</li>\n<li><p><code>'leftTop'</code></p>\n<p> Top-left of funnel chart.</p>\n</li>\n<li><p><code>'leftBottom'</code></p>\n<p> Bottom-left of funnel chart.</p>\n</li>\n<li><p><code>'rightTop'</code></p>\n<p> Top-right side of funnel chart.</p>\n</li>\n<li><p><code>'rightBottom'</code></p>\n<p> Bottom-right side of funnel chart.</p>\n</li>\n<li><p><code>'inner'</code> equals to <code>'inside'</code>.</p>\n</li>\n<li><code>'center'</code> equals to <code>'inside'</code>.</li>\n</ul>\n","default":"'outside'"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show visual guide line.</p>\n"},"length":{"type":["number"],"description":"<p>The length of the first part from visual guide line.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"","default":false},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"labelLine":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show visual guide line.</p>\n"},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-funnel.markPoint.data.x\">x</a>, <a href=\"#series-funnel.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-funnel.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-funnel.markLine.data.0.x\">x</a>, <a href=\"#series-funnel.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-funnel.markArea.data.0.x\">x</a>, <a href=\"#series-funnel.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>Gauge chart</strong></p>\n<p><strong>Example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=gauge-car\" width=\"600\" height=\"500\" ></iframe>\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'gauge'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n<!-- overwrite radius -->\n"},"radius":{"type":["number","string"],"description":"<p>The radius of gauge chart. It can be a percentage value of the smaller of container half width and half height, also can be an absolute value.</p>\n<p>{{ use partial-legend-hover-link }}</p>\n","default":"'75%'"},"startAngle":{"type":["number"],"description":"<p>The start angle of gauge chart. The direct right side of <a href=\"#series-gauge.center\">circle center</a> is <code>0</code> degree, the right above it is <code>90</code> degree, the direct left side of it is <code>180</code> degree.</p>\n","default":225},"endAngle":{"type":["number"],"description":"<p>The end angle of gauge chart.</p>\n","default":-45},"clockwise":{"type":["boolean"],"description":"<p>Whether the scale in gauge chart increases clockwise.</p>\n","default":true},"data":{"type":["Array"],"description":"<p>Data array of series, which can be a single data value, like:</p>\n<pre><code class=\"lang-js\">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href=\"#visualMap\">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class=\"lang-js\">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each arrary item to <a href=\"#visualMap\">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class=\"lang-js\">[{\n // name of date item\n name: 'data1',\n // value of date item is 8\n value: 10\n}, {\n name: 'data2',\n value: 20\n}]\n</code></pre>\n<p>Each data item can be further custerized:</p>\n<pre><code class=\"lang-js\">[{\n name: 'data1',\n value: 10\n}, {\n // name of data item\n name: 'data2',\n value : 56,\n // user-defined label format that only useful for this data item\n label: {},\n // user-defined special itemStyle that only useful for this data item\n itemStyle:{}\n}]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Data name.</p>\n"},"value":{"type":["number"],"description":"<p>Data value.</p>\n"}}}},"min":{"type":["number"],"description":"<p>The minimum data value which map to <a href=\"#series-gauge.minAngle\">minAngle</a>.</p>\n","default":0},"max":{"type":["number"],"description":"<p>The maximum data value which map to <a href=\"#series-gauge.maxAngle\">maxAngle</a>.</p>\n","default":100},"splitNumber":{"type":["number"],"description":"<p>The number of split segments of gauge chart scale.</p>\n","default":10},"axisLine":{"type":["Object"],"description":"<p>The related configuration about the axis line of gauge chart.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the axis line of gauge chart.</p>\n","default":true},"lineStyle":{"type":["Object"],"description":"<p>The style of the axis line of gauge chart.</p>\n","properties":{"color":{"type":["Array"],"description":"<p>The axis line of gauge chart can be divided to several segments in different colors. The end position and color of each segment can be expressed by an array.</p>\n<p>Default value:</p>\n<pre><code class=\"lang-js\">[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]\n</code></pre>\n"},"width":{"type":["number"],"description":"<p>The width of axis line.</p>\n","default":30},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"splitLine":{"type":["Object"],"description":"<p>The style of split line.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the split line.</p>\n","default":true},"length":{"type":["number","string"],"description":"<p>The length of split line, can be a pecentage value relative to radius.</p>\n","default":30},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#eee"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":2},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisTick":{"type":["Object"],"description":"<p>The tick line style.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the scale.</p>\n","default":true},"splitNumber":{"type":["number"],"description":"<p>The split scale number between split line.</p>\n","default":5},"length":{"type":["number","string"],"description":"<p>The length of tick line, can be a pecentage value relative to radius.</p>\n","default":8},"lineStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"#eee"},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":1},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"axisLabel":{"type":["Object"],"description":"<p>Axis tick label.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the label.</p>\n","default":true},"formatter":{"type":["string","Function"],"description":"<p>The content formatter of scale label, which supports both string template and callback function.\nExample:</p>\n<pre><code class=\"lang-js\">// use string template. the template variable {value} represent the default label text\nformatter: '{value} kg'\n\n// use function callback. the function parameters are scale values.\nformatter: function (value) {\n return value + 'km/h';\n}\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"pointer":{"type":["Object"],"description":"<p>Gauge chart pointer.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the pointer.</p>\n","default":true},"length":{"type":["string","number"],"description":"<p>The length of pointer which could be absolute value and also the percentage relative to <a href=\"#series-gauge.radius\">radius</a>.</p>\n","default":"'80%'"},"width":{"type":["number"],"description":"<p>The width of pointer.</p>\n","default":8}}},"itemStyle":{"type":["Object"],"description":"<p>The style of gauge chart.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>The color of pointer. Defaults to use <a href=\"#series-gauge.axisLine.lineStyle.color\">the color of section</a> where the numerical value belongs to.</p>\n","default":"'auto'"},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n<!-- overwrite color -->\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["*"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"title":{"type":["Object"],"description":"<p>The title of gauge chart.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the title.</p>\n","default":true},"offsetCenter":{"type":["Array"],"description":"<p>The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.</p>\n","default":"[0, '-40%']"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#333'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":15},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"detail":{"type":["Object"],"description":"<p>The detail about gauge chart which is used to show data.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show the details.</p>\n","default":true},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"offsetCenter":{"type":["Array"],"description":"<p>The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.</p>\n","default":"[0, '40%']"},"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'auto'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":15},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n<!-- overwrite color -->\n","default":0}}},"color":{"type":["Color"],"description":"<p>The text color. Defaults to use <a href=\"#series-gauge.axisLine.lineStyle.color\">the color of section</a> where the numerical value belongs to.</p>\n","default":"'auto'"}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-gauge.markPoint.data.x\">x</a>, <a href=\"#series-gauge.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-gauge.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href=\"#series-gauge.markLine.data.0.x\">x</a>, <a href=\"#series-gauge.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li>Specify the coordinate in screen coordinate system using <a href=\"#series-gauge.markArea.data.0.x\">x</a>, <a href=\"#series-gauge.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>pictorial bar chart</strong></p>\n<p>Pictorial bar chart is a type of bar chart that custimzed glyph (like images, <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>) can be used instead of rectangular bar. This kind of chart is usually used in infographic.</p>\n<p>Pictorial bar chart can only be used in <a href=\"#grid\">rectangular coordinate</a> with at least 1 category axis.</p>\n<p><strong>Example:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pictorialBar-hill&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><strong>Layout</strong></p>\n<p>Basically <code>pictoialBar</code> is a type of bar chart, which follows the bar chart layout. In <code>pictorialBar</code>, each bar is named as <code>reference bar</code>, which does not be shown, but only be used as a reference for layout of pictorial graphic elements. Each pictorial graphic element is positioned with respect to its <code>reference bar</code> according to the setting of <a href=\"#series-pictorialBar.symbolPosition\">symbolPosition</a>、<a href=\"#series-pictorialBar.symbolOffset\">symbolOffset</a>.</p>\n<p>See the example below:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> is used to specify the size of graphic elements.</p>\n<p>See the example below:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><strong>Graphic types</strong></p>\n<p><a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> can be</p>\n<p>Graphic elements can be set as 'repeat' or not by <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a>.</p>\n<ul>\n<li>If set as <code>false</code> (default), a single graphic element is used to represent a data item.</li>\n<li>If set as <code>true</code>, a group of repeat graphic elements are used to represent a data item.</li>\n</ul>\n<p>See the example below:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p>Each graphic element can be basic shape (like <code>'circle'</code>, <code>'rect'</code>, ...), or <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>, or image. See <a href=\"#series-pictorialBar.symbolType\">symbolType</a>.</p>\n<p>See the example below:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><a href=\"#series-pictorialBar.symbolClip\">symbolClip</a> can be used to clip graphic elements。</p>\n<p>See the example below:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n","properties":{"type":{"type":["string"],"description":"","default":"'pictorialBar'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-pictorialBar.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-pictorialBar.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n","default":0},"cursor":{"type":["string"],"description":"<p>The mouse style when mouse hovers on an element, the same as <code>cursor</code> property in <code>CSS</code>.</p>\n","default":"'pointer'"},"label":{"type":["Object"],"description":"<p>Text label of , to explain some data information about graphic item like value, name and so on. <code>label</code> is placed under <code>itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code>label</code>is taken to be at the same level with <code>itemStyle</code>, and has <code>emphasis</code> as <code>itemStyle</code> does.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"barWidth":{"type":["number"],"description":"<p>The width of the bar. Adaptive when not specified.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code>'bar'</code> series. This attribute should be set on the last <code>'bar'</code> series in the coodinate system, then it will be adopted by all <code>'bar'</code> series in the coordinate system.</p>\n","default":null},"barMaxWidth":{"type":["number"],"description":"<p>The maximum width of the bar. Adaptive when not specified.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code>'bar'</code> series. This attribute should be set on the last <code>'bar'</code> series in the coodinate system, then it will be adopted by all <code>'bar'</code> series in the coordinate system.</p>\n","default":null},"barMinHeight":{"type":["number"],"description":"<p>The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.</p>\n","default":0},"barGap":{"type":["string"],"description":"<p>The gap between bars between different series, is a percent value like <code>'30%'</code>, which means <code>30%</code> of the bar width.</p>\n<p>Set barGap as <code>'-100%'</code> can overlap bars that belong to different series, which is useful when making a series of bar be background.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code>'bar'</code> series. This attribute should be set on the last <code>'bar'</code> series in the coodinate system, then it will be adopted by all <code>'bar'</code> series in the coordinate system.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/barGrid-barGap&reset=1&edit=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n","default":"-100%"},"barCategoryGap":{"type":["string"],"description":"<p>The bar gap of a single series, defaults to be <code>20%</code> of the category gap, can be set as a fixed value.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code>'bar'</code> series. This attribute should be set on the last <code>'bar'</code> series in the coodinate system, then it will be adopted by all <code>'bar'</code> series in the coordinate system.</p>\n","default":"'20%'"},"symbol":{"type":["string"],"description":"<p>Specify the type of graphic elements.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>Example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbol\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbol\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbol: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbol: ... // Only affect this data item.\n }, {\n value: 56\n symbol: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size.</p>\n<p>It can be set as a array, which means [width, height]. For example, <code>[20, 10]</code> means width <code>20</code> and height <code>10</code>. It can also be set as a single number, like <code>10</code>, which is equivalent to <code>[10, 10]</code>.</p>\n<p>Absolute value can be used (like <code>10</code>), or percent value can be used (like <code>'120%'</code>, <code>['55%', 23]</code>).</p>\n<p>When percent value is used, final size of the graphic element is calculated based on its <a href=\"#series-pictorialBar\">reference bar</a>.</p>\n<p>For example, there is a reference bar based on x axis (that is, it is a vertical bar), and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> is set as <code>['30%', '50%']</code>, the final size of its graphic elements is:</p>\n<ul>\n<li>width: <code><width of reference bar> * 30%</code>。</li>\n<li>height:<ul>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used: <code><height of reference bar> * 50%</code>.</li>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used: <code><height of reference bar> * 50%</code>.</li>\n</ul>\n</li>\n</ul>\n<p>Analogously, the case that based on y axis can be obtained by exchanging them.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolSize\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolSize\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolSize: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolSize: ... // Only affect this data item.\n }, {\n value: 56\n symbolSize: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":"['100%', '100%']"},"symbolPosition":{"type":["string"],"description":"<p>Specify the location of the graphic elements. Optional values:</p>\n<ul>\n<li><code>'start'</code>: The edge of graphic element inscribes with the start of the reference bar.</li>\n<li><code>'end'</code>: The edge of graphic element inscribes with the end of the reference bar.</li>\n<li><code>'center'</code>: The graphic element is at the center of the reference bar.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolPosition\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolPosition\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolPosition: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolPosition: ... // Only affect this data item.\n }, {\n value: 56\n symbolPosition: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":"'start'"},"symbolOffset":{"type":["Array"],"description":"<p>Specify the offset of graphic element according to its original position. Adopting <code>symbolOffset</code> is the final step in layout, which enables adjustment of graphic element position.</p>\n<p>A absolute value can be set (like <code>10</code>), or a percent value can be set (like <code>'120%'</code>、<code>['55%', 23]</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p>For example, <code>[0, '-50%']</code> means the graphic element will be adjusted upward half of the size of itself.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolOffset\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolOffset\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolOffset: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolOffset: ... // Only affect this data item.\n }, {\n value: 56\n symbolOffset: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":"[0, 0]"},"symbolRotate":{"type":["number"],"description":"<p>The degree of the rotation of a graphic element.</p>\n<p>Notice, <code>symbolRotate</code> will not affect the position of the graphic element, but just rotating by its center.</p>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRotate\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRotate\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolRotate: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolRotate: ... // Only affect this data item.\n }, {\n value: 56\n symbolRotate: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n"},"symbolRepeat":{"type":["boolean","number","string"],"description":"<p>Whether to repeat a graphic element. Optional values:</p>\n<ul>\n<li><code>false</code>/<code>null</code>/<code>undefined</code>: Do not repeat, that is, each graphic element represents a data item.</li>\n<li><code>true</code>: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to <a href=\"#series-pictorialBar.data\">data</a>.</li>\n<li>a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.</li>\n<li><code>'fixed'</code>: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to <a href=\"#series-pictorialBar.symbolBoundingData\">symbolBoundingData</a>, that is, the repeat times has nothing to do with <a href=\"#series-pictorialBar.data\">data</a>. The setting is useful when graphic elements are used as background.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRepeat\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRepeat\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolRepeat: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolRepeat: ... // Only affect this data item.\n }, {\n value: 56\n symbolRepeat: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n"},"symbolRepeatDirection":{"type":["string"],"description":"<p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used, <code>symbolRepeatDirection</code> specifies the render order of the repeatd graphic elements. The setting is useful in these cases below:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> is set as a negative value, repeated elements will overlap with each other. <code>symbolRepeatDirection</code> can be used to specify the order of overlap.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.animationDelay\">animationDelay</a> or <a href=\"#series-pictorialBar.animationDelayUpdate\">animationDelayUpdate</a> is used, <code>symbolRepeatDirection</code> specifies the order of index.</p>\n</li>\n</ul>\n<p>Optional values can be <code>'start'</code> and <code>'end'</code>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRepeatDirection\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRepeatDirection\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolRepeatDirection: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolRepeatDirection: ... // Only affect this data item.\n }, {\n value: 56\n symbolRepeatDirection: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":"'start'"},"symbolMargin":{"type":["number","string"],"description":"<p>Specify margin of both sides of a graphic element. ("both sides" means the two sides in the direction of its value axis). It works only when <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used.</p>\n<p>Absolute value can be used (like <code>20</code>), or percent value can be used (like <code>'-30%'</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p><code>symbolMargin</code> can be positive value or negative value, which enables overlap of graphic elements when <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used.</p>\n<p>A <code>"!"</code> can be appended on the end of the value, like <code>"30%!"</code> or <code>25!</code>, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.</p>\n<p>Notice:</p>\n<ul>\n<li>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is <code>true</code>/<code>'fixed'</code>:\n The given <code>symbolMargin</code> is just a reference value. The final gap of graphic elements will be calculated according to <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a>, <code>symbolMargin</code> and <a href=\"#series-pictorialBar.symbolBoundingData\">symbolBoundingData</a>.</li>\n<li>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is set as a number:\n <code>symbolMargin</code> does not work any more.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolMargin\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolMargin\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolMargin: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolMargin: ... // Only affect this data item.\n }, {\n value: 56\n symbolMargin: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n"},"symbolClip":{"type":["boolean"],"description":"<p>Whether to clip graphic elements.</p>\n<ul>\n<li><code>false</code>/null/undefined: The whole graphic elements represent the size of value.</li>\n<li><code>true</code>: The clipped graphic elements reperent the size of value.</li>\n</ul>\n<p><code>symbolClip</code> is usually used in this case: both "amont value" and "current value" should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p>Notice, in the example above,</p>\n<ul>\n<li>The same <a href=\"#series.pictorialBar.symbolBoundingData\">symbolBoundingData</a> is used in "background series" and "current value seires", which makes their graphic elements are the same size.</li>\n<li>A bigger <a href=\"#series.pictorialBar.z\">z</a> is set on "current value series", which makes it is over "background series".</li>\n</ul>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolClip\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolClip\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolClip: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolClip: ... // Only affect this data item.\n }, {\n value: 56\n symbolClip: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":false},"symbolBoundingData":{"type":["number"],"description":"<p>Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if <code>symbolBoundingData</code> is set, the final size (or layout) of the graphic elements depend on the <code>symbolBoundingData</code>.</p>\n<p>When reference bar is horizontal, <code>symbolBoundingData</code> is coresponding to x axis, while reference bar is vertical, <code>symbolBoundingData</code> is coresponding to y axis.</p>\n<p>Rule:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used:</p>\n<p> <code>symbolBoundingData</code> is the same as the size of reference bar by default. The size of the graphic element is detemined by <code>symbolBoundingData</code>. For example, if reference bar is vertical, its data is <code>24</code>, <code>symbolSize</code> is set as <code>[30, '50%']</code>, <code>symbolBoundingData</code> is set as <code>124</code>, the final size of the graphic element will be <code>124 * 50% = 62</code>. If <code>symbolBoundingData</code> is not set, the final size will be <code>24 * 50% = 12</code>.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p> <code>symbolBoundingData</code> is the extreme value of the coordinate system. <code>symbolBoundingData</code> defines a bounding area, where repeated graphic elements layout according to <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> and <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>. Both these settings determine the gap size of the repeated graphic elements.</p>\n</li>\n</ul>\n<p><code>symbolBoundingData</code> is usually used in these cases:</p>\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> is used:</p>\n<p> And a series is used to display "amont value", while another series is used to display "current value". <code>symbolBoundingData</code> can be used to ensure that the graphic elements of these two series are at the same size.</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p> <code>symbolBoundingData</code> can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set <code>symbolBoundingData</code>, whose default value is a stable value (extreme value of the coordinate system).</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><br>\n<code>symbolBoundingData</code> can also be an array, such as <code>[-40, 60]</code>, which specifies both negative and positive symbolBoundingData.</p>\n<p>Check this example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolBoundingData\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolBoundingData\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolBoundingData: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolBoundingData: ... // Only affect this data item.\n }, {\n value: 56\n symbolBoundingData: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n"},"symbolPatternSize":{"type":["number"],"description":"<p>Image can be used as the pattern of graphic elements.</p>\n<pre><code class=\"lang-js\">var textureImg = new Image();\ntextureImg.src = 'data:image/jpeg;base64,...'; // dataURI\n// Or\n// textureImg.src = 'http://xxx.xxx.xxx/xx.png'; // URL\n...\nitemStyle: {\n color: {\n image: textureImg,\n repeat: 'repeat'\n }\n}\n</code></pre>\n<p><code>symbolPatternSize</code> specifies the size of pattern image. For example, if <code>symbolPatternSize</code> is <code>400</code>, the pattern image will be displayed at the size of <code>400px * 400px</code>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-patternSize&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolPatternSize\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolPatternSize\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolPatternSize: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolPatternSize: ... // Only affect this data item.\n }, {\n value: 56\n symbolPatternSize: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":400},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable hover animation.</p>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.hoverAnimation\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.hoverAnimation\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n hoverAnimation: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n hoverAnimation: ... // Only affect this data item.\n }, {\n value: 56\n hoverAnimation: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":false,"properties":{"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n","default":0},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","default":0}}},"dimensions":{"type":["Array"],"description":"<p><code>dimensions</code> can be used to define dimension info for <code>series.data</code> or <code>dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code>dimensions</code> here. But if <code>dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code>dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // Specify name for each dimesions, which will be displayed in tooltip.\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: [\n null, // If you do not intent to defined this dimension, use null is fine.\n {type: 'ordinal'}, // Specify type of this dimension.\n // 'ordinal' is always used in string.\n // If type is not specified, echarts will guess type by data.\n {name: 'good', type: 'number'},\n 'bad' // Equals to {name: 'bad'}.\n ]\n}\n</code></pre>\n<p>Each data item of <code>dimensions</code> can be:</p>\n<ul>\n<li><code>string</code>, for example, <code>'someName'</code>, which equals to <code>{name: 'someName'}</code>.</li>\n<li><code>Object</code>, where the attributes can be:<ul>\n<li>name: <code>string</code>.</li>\n<li>type: <code>string</code>, supports:<ul>\n<li><code>number</code></li>\n<li><code>float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code>int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code>ordinal</code>, discrete value, which represents string generally.</li>\n<li><code>time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code>string</code>, generally used in tooltip for dimension display. If not specified, use <code>name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code>dimensions</code> is specified, the default <code>tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code>tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code>data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // Each column is called a dimension.\n // There are five dimensions: 0, 1, 2, 3, 4。\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n encode: {\n x: [3, 1, 5], // Dimension 3, 1, 5 is mapped to x axis.\n y: 2, // Dimension 2 is mapped to y axis.\n tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n }\n }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code>encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n encode: {\n x: 'date',\n y: ['open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" target=\"_blank\">example</a> for <code>encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code>encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n xAxis: {},\n yAxis: {},\n dataZoom: [{\n xAxisIndex: 0\n }, {\n yAxisIndex: 0\n }],\n series: {\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'circle',\n shape: {\n cx: 100, // x position is always 100\n cy: api.coord([0, api.value(0)])[1],\n r: 30\n },\n style: {\n fill: 'blue'\n }\n };\n },\n encode: {\n // Then the series will not be controlled\n // by x axis and corresponding dataZoom.\n x: -1,\n y: 1\n },\n data: [ ... ]\n }\n};\n</code></pre>\n"},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code>data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code>data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code>series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each colum is named as a "dimension".</p>\n<pre><code class=\"lang-js\">series: [{\n data: [\n // dimX dimY other dimensions ...\n [ 3.4, 4.5, 15, 43],\n [ 4.2, 2.3, 20, 91],\n [ 10.8, 9.5, 30, 18],\n [ 7.2, 8.8, 18, 57]\n ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, "dimX" and "dimY" correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> repectively.</li>\n<li>In <a href=\"#polar\">polar</a> "dimX" and "dimY" correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> repectively.</li>\n<li>Other dimensions are optional, which can be used in other place. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to viusal (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code>'category'</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n // Each item corresponds to each item in xAxis.data.\n data: [23, 44, 55, 19]\n // In fact, it is the simplification of the format below:\n // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between "value" and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code>'value'</code> or <code>'log'</code>):</p>\n<p> The value can be a <code>number</code> (like <code>12</code>) (can also be a number in a <code>string</code> format, like <code>'12'</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code>'category'</code>):</p>\n<p> The value should be the ordinal of the axis.data (based on <code>0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\"> xAxis: {\n type: 'category',\n data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n },\n yAxis: {\n type: 'category',\n data: ['a', 'b', 'm', 'n', 'p', 'q']\n },\n series: [{\n data: [\n // xAxis yAxis\n [ 0, 0, 2 ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n [ 'Thursday', 2, 1 ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n [ 2, 'p', 2 ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n [ 3, 3, 5 ]\n ]\n }]\n</code></pre>\n<p> There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code>'time'</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code>1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code>'2012-03'</code>, <code>'2012-03-01'</code>, <code>'2012-03-01 05'</code>, <code>'2012-03-01 05:06'</code>.</li>\n<li>separated by <code>"T"</code> or a space: <code>'2012-03-01T12:22:33.123'</code>, <code>'2012-03-01 12:22:33.123'</code>.</li>\n<li>timezone specified: <code>'2012-03-01T12:22:33Z'</code>, <code>'2012-03-01T12:22:33+8000'</code>, <code>'2012-03-01T12:22:33-05:00'</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code>'2012'</code>, <code>'2012-3-1'</code>, <code>'2012/3/1'</code>, <code>'2012/03/01'</code>,\n<code>'2009/6/12 2:00'</code>, <code>'2009/6/12 2:05:08'</code>, <code>'2009/6/12 2:05:08.123'</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code>new Date('2012-01-01')</code> is treated as a Jan 1st 2012 in UTC, while <code>new Date('2012-1-1')</code> and <code>new Date('2012/01/01')</code> are treated as Jan 1st 2012 in local timezone. In safari <code>new Date('2012-1-1')</code> is not supported.</li>\n<li>So if you intent to perform <code>new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code>echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code>value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n 12,\n 24,\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n 33\n]\n// Or\n[\n [12, 332],\n [24, 32],\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code>'-'</code> or <code>null</code> or <code>undefined</code> or <code>NaN</code> can be used to describe that a data item is not exists (ps：<em>not exist</em> does not means its value is <code>0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>The name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>The value of a single data item.</p>\n"},"symbol":{"type":["string"],"description":"<p>Specify the type of graphic elements.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>Example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbol\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbol\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbol: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbol: ... // Only affect this data item.\n }, {\n value: 56\n symbol: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":"'circle'"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size.</p>\n<p>It can be set as a array, which means [width, height]. For example, <code>[20, 10]</code> means width <code>20</code> and height <code>10</code>. It can also be set as a single number, like <code>10</code>, which is equivalent to <code>[10, 10]</code>.</p>\n<p>Absolute value can be used (like <code>10</code>), or percent value can be used (like <code>'120%'</code>, <code>['55%', 23]</code>).</p>\n<p>When percent value is used, final size of the graphic element is calculated based on its <a href=\"#series-pictorialBar\">reference bar</a>.</p>\n<p>For example, there is a reference bar based on x axis (that is, it is a vertical bar), and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a> is set as <code>['30%', '50%']</code>, the final size of its graphic elements is:</p>\n<ul>\n<li>width: <code><width of reference bar> * 30%</code>。</li>\n<li>height:<ul>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used: <code><height of reference bar> * 50%</code>.</li>\n<li>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used: <code><height of reference bar> * 50%</code>.</li>\n</ul>\n</li>\n</ul>\n<p>Analogously, the case that based on y axis can be obtained by exchanging them.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolSize\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolSize\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolSize: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolSize: ... // Only affect this data item.\n }, {\n value: 56\n symbolSize: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":"['100%', '100%']"},"symbolPosition":{"type":["string"],"description":"<p>Specify the location of the graphic elements. Optional values:</p>\n<ul>\n<li><code>'start'</code>: The edge of graphic element inscribes with the start of the reference bar.</li>\n<li><code>'end'</code>: The edge of graphic element inscribes with the end of the reference bar.</li>\n<li><code>'center'</code>: The graphic element is at the center of the reference bar.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolPosition\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolPosition\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolPosition: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolPosition: ... // Only affect this data item.\n }, {\n value: 56\n symbolPosition: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":"'start'"},"symbolOffset":{"type":["Array"],"description":"<p>Specify the offset of graphic element according to its original position. Adopting <code>symbolOffset</code> is the final step in layout, which enables adjustment of graphic element position.</p>\n<p>A absolute value can be set (like <code>10</code>), or a percent value can be set (like <code>'120%'</code>、<code>['55%', 23]</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p>For example, <code>[0, '-50%']</code> means the graphic element will be adjusted upward half of the size of itself.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolOffset\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolOffset\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolOffset: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolOffset: ... // Only affect this data item.\n }, {\n value: 56\n symbolOffset: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":"[0, 0]"},"symbolRotate":{"type":["number"],"description":"<p>The degree of the rotation of a graphic element.</p>\n<p>Notice, <code>symbolRotate</code> will not affect the position of the graphic element, but just rotating by its center.</p>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRotate\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRotate\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolRotate: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolRotate: ... // Only affect this data item.\n }, {\n value: 56\n symbolRotate: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n"},"symbolRepeat":{"type":["boolean","number","string"],"description":"<p>Whether to repeat a graphic element. Optional values:</p>\n<ul>\n<li><code>false</code>/<code>null</code>/<code>undefined</code>: Do not repeat, that is, each graphic element represents a data item.</li>\n<li><code>true</code>: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to <a href=\"#series-pictorialBar.data\">data</a>.</li>\n<li>a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.</li>\n<li><code>'fixed'</code>: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to <a href=\"#series-pictorialBar.symbolBoundingData\">symbolBoundingData</a>, that is, the repeat times has nothing to do with <a href=\"#series-pictorialBar.data\">data</a>. The setting is useful when graphic elements are used as background.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRepeat\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRepeat\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolRepeat: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolRepeat: ... // Only affect this data item.\n }, {\n value: 56\n symbolRepeat: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n"},"symbolRepeatDirection":{"type":["string"],"description":"<p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used, <code>symbolRepeatDirection</code> specifies the render order of the repeatd graphic elements. The setting is useful in these cases below:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> is set as a negative value, repeated elements will overlap with each other. <code>symbolRepeatDirection</code> can be used to specify the order of overlap.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.animationDelay\">animationDelay</a> or <a href=\"#series-pictorialBar.animationDelayUpdate\">animationDelayUpdate</a> is used, <code>symbolRepeatDirection</code> specifies the order of index.</p>\n</li>\n</ul>\n<p>Optional values can be <code>'start'</code> and <code>'end'</code>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolRepeatDirection\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolRepeatDirection\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolRepeatDirection: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolRepeatDirection: ... // Only affect this data item.\n }, {\n value: 56\n symbolRepeatDirection: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":"'start'"},"symbolMargin":{"type":["number","string"],"description":"<p>Specify margin of both sides of a graphic element. ("both sides" means the two sides in the direction of its value axis). It works only when <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used.</p>\n<p>Absolute value can be used (like <code>20</code>), or percent value can be used (like <code>'-30%'</code>), which is based on its <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>.</p>\n<p><code>symbolMargin</code> can be positive value or negative value, which enables overlap of graphic elements when <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used.</p>\n<p>A <code>"!"</code> can be appended on the end of the value, like <code>"30%!"</code> or <code>25!</code>, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.</p>\n<p>Notice:</p>\n<ul>\n<li>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is <code>true</code>/<code>'fixed'</code>:\n The given <code>symbolMargin</code> is just a reference value. The final gap of graphic elements will be calculated according to <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a>, <code>symbolMargin</code> and <a href=\"#series-pictorialBar.symbolBoundingData\">symbolBoundingData</a>.</li>\n<li>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is set as a number:\n <code>symbolMargin</code> does not work any more.</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolMargin\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolMargin\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolMargin: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolMargin: ... // Only affect this data item.\n }, {\n value: 56\n symbolMargin: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n"},"symbolClip":{"type":["boolean"],"description":"<p>Whether to clip graphic elements.</p>\n<ul>\n<li><code>false</code>/null/undefined: The whole graphic elements represent the size of value.</li>\n<li><code>true</code>: The clipped graphic elements reperent the size of value.</li>\n</ul>\n<p><code>symbolClip</code> is usually used in this case: both "amont value" and "current value" should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p>Notice, in the example above,</p>\n<ul>\n<li>The same <a href=\"#series.pictorialBar.symbolBoundingData\">symbolBoundingData</a> is used in "background series" and "current value seires", which makes their graphic elements are the same size.</li>\n<li>A bigger <a href=\"#series.pictorialBar.z\">z</a> is set on "current value series", which makes it is over "background series".</li>\n</ul>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolClip\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolClip\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolClip: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolClip: ... // Only affect this data item.\n }, {\n value: 56\n symbolClip: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":false},"symbolBoundingData":{"type":["number"],"description":"<p>Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if <code>symbolBoundingData</code> is set, the final size (or layout) of the graphic elements depend on the <code>symbolBoundingData</code>.</p>\n<p>When reference bar is horizontal, <code>symbolBoundingData</code> is coresponding to x axis, while reference bar is vertical, <code>symbolBoundingData</code> is coresponding to y axis.</p>\n<p>Rule:</p>\n<ul>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is not used:</p>\n<p> <code>symbolBoundingData</code> is the same as the size of reference bar by default. The size of the graphic element is detemined by <code>symbolBoundingData</code>. For example, if reference bar is vertical, its data is <code>24</code>, <code>symbolSize</code> is set as <code>[30, '50%']</code>, <code>symbolBoundingData</code> is set as <code>124</code>, the final size of the graphic element will be <code>124 * 50% = 62</code>. If <code>symbolBoundingData</code> is not set, the final size will be <code>24 * 50% = 12</code>.</p>\n</li>\n<li><p>If <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p> <code>symbolBoundingData</code> is the extreme value of the coordinate system. <code>symbolBoundingData</code> defines a bounding area, where repeated graphic elements layout according to <a href=\"#series-pictorialBar.symbolMargin\">symbolMargin</a> and <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> and <a href=\"#series-pictorialBar.symbolSize\">symbolSize</a>. Both these settings determine the gap size of the repeated graphic elements.</p>\n</li>\n</ul>\n<p><code>symbolBoundingData</code> is usually used in these cases:</p>\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolClip\">symbolCilp</a> is used:</p>\n<p> And a series is used to display "amont value", while another series is used to display "current value". <code>symbolBoundingData</code> can be used to ensure that the graphic elements of these two series are at the same size.</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<ul>\n<li><p>When <a href=\"#series-pictorialBar.symbolRepeat\">symbolRepeat</a> is used:</p>\n<p> <code>symbolBoundingData</code> can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set <code>symbolBoundingData</code>, whose default value is a stable value (extreme value of the coordinate system).</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><br>\n<code>symbolBoundingData</code> can also be an array, such as <code>[-40, 60]</code>, which specifies both negative and positive symbolBoundingData.</p>\n<p>Check this example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolBoundingData\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolBoundingData\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolBoundingData: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolBoundingData: ... // Only affect this data item.\n }, {\n value: 56\n symbolBoundingData: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n"},"symbolPatternSize":{"type":["number"],"description":"<p>Image can be used as the pattern of graphic elements.</p>\n<pre><code class=\"lang-js\">var textureImg = new Image();\ntextureImg.src = 'data:image/jpeg;base64,...'; // dataURI\n// Or\n// textureImg.src = 'http://xxx.xxx.xxx/xx.png'; // URL\n...\nitemStyle: {\n color: {\n image: textureImg,\n repeat: 'repeat'\n }\n}\n</code></pre>\n<p><code>symbolPatternSize</code> specifies the size of pattern image. For example, if <code>symbolPatternSize</code> is <code>400</code>, the pattern image will be displayed at the size of <code>400px * 400px</code>.</p>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-patternSize&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.symbolPatternSize\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.symbolPatternSize\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n symbolPatternSize: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n symbolPatternSize: ... // Only affect this data item.\n }, {\n value: 56\n symbolPatternSize: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":400},"z":{"type":["number"],"description":"<p>Specify the relationship of overlap between gaphic elements. A bigger value means higher.</p>\n"},"hoverAnimation":{"type":["boolean"],"description":"<p>Whether to enable hover animation.</p>\n<p>This attribute can be set at the <a href=\"#series-pictorialBar.hoverAnimation\">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href=\"#series-pictorialBar.data.hoverAnimation\">each data item</a> in <a href=\"series-pictorialBar.data\" target=\"_blank\">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: [{\n hoverAnimation: ... // Affect all data items.\n data: [23, 56]\n}]\n// Or\nseries: [{\n data: [{\n value: 23\n hoverAnimation: ... // Only affect this data item.\n }, {\n value: 56\n hoverAnimation: ... // Only affect this data item.\n }]\n}]\n</code></pre>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n","default":0},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","default":0},"label":{"type":["Object"],"description":"<p>The style setting of the text label in a single bar.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"inside"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"markPoint":{"type":["Object"],"description":"<p>Mark point in a chart.</p>\n","properties":{"symbol":{"type":["string","Function"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>If symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":"'pin'"},"symbolSize":{"type":["number","Array","Function"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n<p>If size of symbols needs to be different, you can set with callback function in the following format:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>The first parameter <code>value</code> is the value in <a href=\"#series-.data\">data</a>, and the second parameter <code>params</code> is the rest parameters of data item.</p>\n","default":50},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label of mark point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'inside'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-pictorialBar.markPoint.data.x\">x</a>, <a href=\"#series-pictorialBar.markPoint.data.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-pictorialBar.markPoint.data.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-pictorialBar.markPoint.data.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-pictorialBar.markPoint.data.valueIndex\">valueIndex</a> or <a href=\"#series-pictorialBar.markPoint.data.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: 'maximum',\n type: 'max'\n }, \n {\n name: 'coordinate',\n coord: [10, 20]\n }, {\n name: 'fixed x position',\n yAxis: 10,\n x: '90%'\n }, \n {\n name: 'screen coordinate',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Mark point name.</p>\n","default":"''"},"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> maximum value.</li>\n<li><code>'max'</code> minimum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Available when using <a href=\"#series-pictorialBar.markPoint.data.type\">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code>0</code> (xAxis, radiusAxis), <code>1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-pictorialBar.markPoint.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of .</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p> symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"itemStyle":{"type":["Object"],"description":"<p>Mark point style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n<p>prefix</p>\n","default":0}}},"markLine":{"type":["*"],"description":"<p>Use a line in the chart to illustrate.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"symbol":{"type":["string","Array"],"description":"<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href=\"#series-pictorialBar.markLine.data.0.symbol\">data.symbol</a> for more format information.</p>\n"},"symbolSize":{"type":["number","Array"],"description":"<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code>symbolSize</code>.</p>\n"},"precision":{"type":["number"],"description":"<p>Precison of marking line value, which is useful when displaying average value mark line.</p>\n","default":2},"label":{"type":["Object"],"description":"<p>Mark line text.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}},"lineStyle":{"type":["Object"],"description":"<p>Mark line style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li><p>Assign coordinate according to container with <a href=\"#series-pictorialBar.markLine.data.0.x\">x</a>, <a href=\"#series-pictorialBar.markLine.data.0.y\">y</a> attribute, in which pixel values and percentage are supported.</p>\n</li>\n<li><p>Assign coordinate position with <a href=\"#series-pictorialBar.markLine.data.0.coord\">coord</a> attribute, in which <code>'min'</code>, <code>'max'</code>, <code>'average'</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href=\"#series-pictorialBar.markLine.data.0.type\">type</a> attribute to mark the maximum and minimum values in the series, in which <a href=\"#series-pictorialBar.markLine.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-pictorialBar.markLine.data.0.valueDim\">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code>xAxis</code> or <code>yAxis</code>. See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code>type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code>valueIndex</code>.</p>\n<pre><code>data: [\n {\n name: 'average line',\n // 'average', 'min', and 'max' are supported\n type: 'average'\n },\n {\n name: 'Horizontal line with Y value at 100',\n yAxis: 100\n },\n [\n {\n // Use the same name with starting and ending point\n name: 'Minimum to Maximum',\n type: 'min'\n },\n {\n type: 'max'\n }\n ],\n [\n {\n name: 'Markline between two points',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [{\n // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n yAxis: 'max',\n x: '90%'\n }, {\n type: 'max'\n }],\n [\n {\n name: 'Mark line between two points',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Data of the starting point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of starting point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>starting point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of starting point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of starting point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}},"1":{"type":["Object"],"description":"<p>Data of the ending point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code>'min'</code> minimum value.</li>\n<li><code>'max'</code> maximum value.</li>\n<li><code>'average'</code> average value.</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code>0</code> (for xAxis, or radiusAxis), or <code>1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Works only when <a href=\"#series-.markLine.data.type\">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code>x</code>, or <code>angle</code> for line charts, or <code>open</code>, or <code>close</code> for candlestick charts.</p>\n"},"coord":{"type":["Array"],"description":"<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code>x</code>, and <code>y</code> for <a href=\"#grid\">rectangular coordinates</a>, or <code>radius</code>, and <code>angle</code> for <a href=\"#polar\">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href=\"#xAixs.type\">axis.type</a> <code>'category'</code>:</p>\n<ul>\n<li>If coord value is <code>number</code>, it represents index of <a href=\"#xAxis.data\">axis.data</a>.</li>\n<li>If coord value is <code>string</code>, it represents concrete value in <a href=\"#xAxis.data\">axis.data</a>. Please notice that in this case <code>xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class=\"lang-javascript\">{\n xAxis: {\n type: 'category',\n data: ['5', '6', '9', '13', '19', '33']\n // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n },\n series: {\n type: 'line',\n data: [11, 22, 33, 44, 55, 66],\n markPoint: { // markLine is in the same way.\n data: [{\n coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, '33'.\n // coord: ['5', 33.4] // The string '5' represents the '5' in xAxis.data.\n }]\n }\n }\n}\n</code></pre>\n"},"x":{"type":["number"],"description":"<p>X position according to container, in pixel.</p>\n"},"y":{"type":["number"],"description":"<p>Y position according to container, in pixel.</p>\n"},"value":{"type":["number"],"description":"<p>Label value, which can be ignored.</p>\n"},"symbol":{"type":["string"],"description":"<p>Symbol of ending point.</p>\n<p>Icon types provided by ECharts includes \n<code>'circle'</code>, <code>'rect'</code>, <code>'roundRect'</code>, <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code>, <code>'arrow'</code>, <code>'none'</code></p>\n<p>It can be set to an image with <code>'image://url'</code> , in which URL is the link to an image, or <code>dataURI</code> of an image.</p>\n<p>An image URL example:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>A <code>dataURI</code> example:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>Icons can be set to arbitrary vector path via <code>'path://'</code> in ECharts. As compared with raster image, vector paths prevent from jagging and blurring when scaled, and have a better control over changing colors. Size of vectoer icon will be adapted automatically. Refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> for more information about format of path. You may export vector paths from tools like Adobe Illustrator.</p>\n<p>For example:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>"},"symbolSize":{"type":["number","Array"],"description":"<p>ending point symbol size. It can be set to single numbers like <code>10</code>, or use an array to represent width and height. For example, <code>[20, 10]</code> means symbol width is <code>20</code>, and height is<code>10</code>.</p>\n"},"symbolRotate":{"type":["number"],"description":"<p>Rotate degree of ending point symbol. Note that when <code>symbol</code> is set to be <code>'arrow'</code> in <code>markLine</code>, <code>symbolRotate</code> value will be ignored, and compulsively use tangent angle.</p>\n"},"symbolKeepAspect":{"type":["boolean"],"description":"<p>Whether to keep aspect for symbols in the form of <code>path://</code>.</p>\n","default":false},"symbolOffset":{"type":["Array"],"description":"<p>Offset of ending point symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code>[0, '50%']</code> means to move upside side position of symbol height. It can be used to make the arrow in the bottom to be at data position when symbol is pin.</p>\n","default":"[0, 0]"},"lineStyle":{"type":["Object"],"description":"<p>Line style of this data item, which will be merged with <code>lineStyle</code> of starting point and ending point.</p>\n","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p>Line color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":"\"#000\""},"width":{"type":["number"],"description":"<p> line width.</p>\n","default":0},"type":{"type":["string"],"description":"<p> line type.</p>\n<p>Options are: </p>\n<ul>\n<li><code>'solid'</code></li>\n<li><code>'dashed'</code></li>\n<li><code>'dotted'</code></li>\n</ul>\n","default":"solid"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"curveness":{"type":["number"],"description":"<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n","default":0}}}}},"label":{"type":["Object"],"description":"<p>Label of this data item, which will be merged with <code>label</code> of starting point and ending point.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether show label or not.</p>\n","default":true},"position":{"type":["string"],"description":"<p>Positions of labels can be:</p>\n<ul>\n<li><code>'start'</code> starting point of the line.</li>\n<li><code>'middle'</code> middle point of the line.</li>\n<li><code>'end'</code> ending point of the line.</li>\n</ul>\n","default":"'end'"},"formatter":{"type":["string","Function"],"description":"<p>Data label formatter, which supports string template and callback function. In either form, <code>\\n</code> is supported to represent a new line.</p>\n<p><strong>String template</strong></p>\n<p>Model variation includes:</p>\n<ul>\n<li><code>{a}</code>: series name.</li>\n<li><code>{b}</code>: the name of a data item.</li>\n<li><code>{c}</code>: the value of a data item.</li>\n<li><code>{d}</code>: the percent.</li>\n<li><code>{@xxx}: the value of a dimension named</code>'xxx'<code>, for example,</code>{@product}<code>refers the value of</code>'product'` dimension。</li>\n<li><code>{@[n]}: the value of a dimension at the index of</code>n<code>, for example,</code>{@[3]}` refers the value at dimensions[3].</li>\n</ul>\n<p><strong>example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>Callback function</strong></p>\n<p>Callback function is in form of:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>where <code>params</code> is the single dataset needed by formatter, which is formed as:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n"}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"markArea":{"type":["Object"],"description":"<p>Used to mark an area in chart. For example, mark a time interval.</p>\n","properties":{"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"label":{"type":["Object"],"description":"<p>Label in mark area.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>Style of the mark area.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["*"],"description":"<p>The scope of the area is defined by <code>data</code>, which is an array with two item, representing the left-top point and the right-bottom point of rectangle area. Each item can be defined as follows:</p>\n<ol>\n<li><p>Specify the coordinate in screen coordinate system using <a href=\"#series-pictorialBar.markArea.data.0.x\">x</a>, <a href=\"#series-pictorialBar.markArea.data.0.y\">y</a>, where the unit is pixel (e.g., the value is <code>5</code>), or percent (e.g., the value is <code>'35%'</code>).</p>\n</li>\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href=\"#series-pictorialBar.markArea.data.0.coord\">coord</a>, which can be also set as <code>'min'</code>, <code>'max'</code>, <code>'average'</code> (e.g, <code>coord: [23, 'min']</code>, or <code>coord: ['average', 'max']</code>)。</p>\n</li>\n</ol>\n<ol>\n<li>Locate the point on the min value or max value of <code>series.data</code> using <a href=\"#series-pictorialBar.markArea.data.0.type\">type</a>, where <a href=\"#series-pictorialBar.markArea.data.0.valueIndex\">valueIndex</a> or <a href=\"#series-pictorialBar.markPoint.data.0.valueDim\">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</li>\n<li>If in cartesian, you can only specify <code>xAxis</code> or <code>yAxis</code> to define a mark area based on only X or Y axis, see sample <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-weight\" target=\"_blank\">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n [\n {\n name: 'From average to max',\n type: 'average'\n },\n {\n type: 'max'\n }\n ],\n\n [\n {\n name: 'Mark area between two points in data coordiantes',\n coord: [10, 20]\n },\n {\n coord: [20, 30]\n }\n ], [\n {\n name: 'From 60 to 80',\n yAxis: 60\n },\n {\n yAxis: 80\n }\n ], [\n {\n name: 'Mark area covers all data'\n coord: ['min', 'min']\n },\n {\n coord: ['max', 'max']\n }\n ],\n [\n {\n name: 'Mark area in two screen points',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>","properties":{"0":{"type":["Object"],"description":"<p>Specify the left-top point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}},"1":{"type":["Object"],"description":"<p>Specify the right-bottom point.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code>'min'</code> max value。</li>\n<li><code>'max'</code> min value。</li>\n<li><code>'average'</code> average value。</li>\n</ul>\n"},"valueIndex":{"type":["number"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be <code>0</code> (means xAxis, radiusAxis) or <code>1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n"},"valueDim":{"type":["string"],"description":"<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href=\"#series-.markArea.data.type\">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code>x</code>, <code>angle</code> in line chart, and <code>open</code>, <code>close</code> in candlestick).</p>\n"},"coord":{"type":["Array"],"description":"<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code>x</code>, <code>y</code> on <a href=\"#grid\">cartesian</a>, or <code>radius</code>, <code>angle</code> on <a href=\"#polar\">polar</a>.</p>\n"},"x":{"type":["number"],"description":"<p>x value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"y":{"type":["number"],"description":"<p>y value on screen coordinate system, can be pixel number (like <code>5</code>), or percent value (like <code>'20%'</code>).</p>\n"},"value":{"type":["number"],"description":"<p>value of the item, not necessary.</p>\n"},"itemStyle":{"type":["Object"],"description":"<p>Style of the item.\n<code>itemStyle</code> of start point and end point will be merged together.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"},"emphasis":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"label":{"type":["Object"],"description":"<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}},"emphasis":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}}}}}}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in pictorial bar chart.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in pictorial bar chart, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut","properties":{"animationDelay":{"type":["number","Function"],"description":"<p>Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n","default":0},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (dataIndex, params) {\n return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n\n\n\n\n\n\n\n\n","default":0}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong> Theme river </strong></p>\n<p>It is a special flow graph which is mainly used to present the changes of an event or theme during a period.</p>\n<p><strong>Sample: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=themeRiver-lastfm&edit=1&reset=1\" width=\"700\" height=\"580\" ></iframe>\n\n\n\n<p><br>\n<strong>visual encoding: </strong></p>\n<p>The ribbon-shape river branches in different colors in theme river encode variable events or themes. The width of river branches encode the value of the original dataset.</p>\n<p>What's more, the time attribute of the orinigal dataset would map to a single time axis.</p>\n","properties":{"type":{"type":["string"],"description":"","default":"'themeRiver'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in .</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"left":{"type":["string","number"],"description":"<p>Distance between thmemRiver component and the left side of the container.</p>\n<p><code>left</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'left'</code>, <code>'center'</code>, or <code>'right'</code>, then the component will be aligned automatically based on position.</p>\n","default":"5%"},"top":{"type":["string","number"],"description":"<p>Distance between thmemRiver component and the top side of the container.</p>\n<p><code>top</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>; and it can also be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>.</p>\n<p>If the <code>left</code> value is set to be <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, then the component will be aligned automatically based on position.</p>\n","default":"5%"},"right":{"type":["string","number"],"description":"<p>Distance between thmemRiver component and the right side of the container.</p>\n<p><code>right</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":"5%"},"bottom":{"type":["string","number"],"description":"<p>Distance between thmemRiver component and the bottom side of the container.</p>\n<p><code>bottom</code> value can be instant pixel value like <code>20</code>; it can also be percentage value relative to container width like <code>'20%'</code>.</p>\n","default":"5%"},"width":{"type":["string","number"],"description":"<p>Width of thmemRiver component. </p>\n","default":null},"height":{"type":["string","number"],"description":"<p>Height of thmemRiver component. </p>\n<p><strong> Notes: </strong>\nThe positional information of the whole theme river view reuses the positional information of a single time axis, which are left, top, right and bottom.</p>\n","default":null},"coordinateSystem":{"type":["string"],"description":"<p>coordinate. The theme river adopts sinle time axis.</p>\n","default":"\"single\""},"boundaryGap":{"type":["Array"],"description":"<p>The boundary gap of the direction orthogonal with coordinate axis in diagram, which is set to adjust the diagram position, keeping it on the screen center instead of the upside or downside of the screen.</p>\n","default":"[\"10%\", \"10%\"]"},"singleAxisIndex":{"type":["number"],"description":"<p>The index of single time axis, which defaults to be 0 because it contains only one axis.</p>\n","default":0},"label":{"type":["Object"],"description":"<p><code>label</code> describes style of text labels with which each ribbon-shape river branch corresponds in theme river.</p>\n","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":true},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'left'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'#000'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":11},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"<p>style of each ribbon-shape river branch in theme river.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"label":{"type":["Object"],"description":"","properties":{"show":{"type":["boolean"],"description":"<p>Whether to show label.</p>\n","default":false},"position":{"type":["string","Array"],"description":"<p>Label position.</p>\n<p><strong>Followings are the options: </strong></p>\n<ul>\n<li><p>[x, y]</p>\n<p> Use relative percentage, or absolute pixel values to represent position of label relative to top-left corner of bounding box.\n For example:</p>\n<pre><code class=\"lang-js\"> // Absolute pixel values\n position: [10, 10],\n // Relative percentage\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p>'top'</p>\n</li>\n<li>'left'</li>\n<li>'right'</li>\n<li>'bottom'</li>\n<li>'inside'</li>\n<li>'insideLeft'</li>\n<li>'insideRight'</li>\n<li>'insideTop'</li>\n<li>'insideBottom'</li>\n<li>'insideTopLeft'</li>\n<li>'insideBottomLeft'</li>\n<li>'insideTopRight'</li>\n<li>'insideBottomRight'</li>\n</ul>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":"'left'"},"distance":{"type":["number"],"description":"<p>Distance to the host graphic element. Works when position is string value (like <code>'top'</code>、<code>'insideRight'</code>).</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>.</p>\n","default":5},"rotate":{"type":["number"],"description":"<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>.</p>\n"},"offset":{"type":["Array"],"description":"<p>Whether to move text slightly. For example: <code>[30, 40]</code> means move <code>30</code> horizontally and move <code>40</code> vertically.</p>\n"},"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'#000'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":11},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0},"rich":{"type":["Object"],"description":"<p>"Rich text styles" can be defined in this <code>rich</code> property. For example:</p>\n<pre><code class=\"lang-js\">label: {\n // Styles defined in 'rich' can be applied to some fregments\n // of text by adding some markers to those fregment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style "a" is applied to this snippet}'\n '{b|Style "b" is applied to this snippet}This snippet use default style{x|use style "x"}'\n ].join('\\n'),\n\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</code></pre>\n<p>For more details, see <a href=\"tutorial.html#Rich%20Text\" target=\"_blank\">Rich Text</a> please.</p>\n","properties":{"<user defined style name>":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"align":{"type":["string"],"description":"<p>Horizontal alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'left'</code></li>\n<li><code>'center'</code></li>\n<li><code>'right'</code></li>\n</ul>\n<p>If <code>align</code> is not set in <code>rich</code>, <code>align</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // `align` is not set, then it will be right\n }\n }\n}\n</code></pre>\n"},"verticalAlign":{"type":["string"],"description":"<p>Vertical alignment of text, automatic by default.</p>\n<p>Options are:</p>\n<ul>\n<li><code>'top'</code></li>\n<li><code>'middle'</code></li>\n<li><code>'bottom'</code></li>\n</ul>\n<p>If <code>verticalAlign</code> is not set in <code>rich</code>, <code>verticalAlign</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // `verticalAlign` is not set, then it will be bottom\n }\n }\n}\n</code></pre>\n"},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"backgroundColor":{"type":["string","Object"],"description":"<p>Background color of the text fregment.</p>\n<p>Can be color string, like <code>'#123234'</code>, <code>'red'</code>, <code>'rgba(0,23,11,0.3)'</code>.</p>\n<p>Or image can be used, for example:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // It can be URL of a image,\n // or dataURI,\n // or HTMLImageElement,\n // or HTMLCanvasElement.\n}\n</code></pre>\n<p><code>width</code> or <code>height</code> can be specified when using background image, or\nauto adapted by default.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderColor":{"type":["string"],"description":"<p>Border color of the text fregment.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"borderWidth":{"type":["number"],"description":"<p>Border width of the text fregment.</p>\n","default":0},"borderRadius":{"type":["number"],"description":"<p>Border radius of the text fregment.</p>\n","default":0},"padding":{"type":["number","Array"],"description":"<p>Padding of the text fregment, for example:</p>\n<ul>\n<li><code>padding: [3, 4, 5, 6]</code>: represents padding of <code>[top, right, bottom, left]</code>.</li>\n<li><code>padding: 4</code>: represents <code>padding: [4, 4, 4, 4]</code>.</li>\n<li><code>padding: [3, 4]</code>: represents <code>padding: [3, 4, 3, 4]</code>.</li>\n</ul>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n","default":0},"shadowColor":{"type":["string"],"description":"<p>Shadow color of the text block.</p>\n","default":"'transparent'"},"shadowBlur":{"type":["number"],"description":"<p>Show blur of the text block.</p>\n","default":0},"shadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text block.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text block.</p>\n","default":0},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n<p>If set as <code>'auto'</code>, the color will assigned as visual color, such as series color.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}}}}}},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n","default":20},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n","default":"'rgba(0,0,0,0.8)'"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code>data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code>data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code>series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each colum is named as a "dimension".</p>\n<pre><code class=\"lang-js\">series: [{\n data: [\n // dimX dimY other dimensions ...\n [ 3.4, 4.5, 15, 43],\n [ 4.2, 2.3, 20, 91],\n [ 10.8, 9.5, 30, 18],\n [ 7.2, 8.8, 18, 57]\n ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, "dimX" and "dimY" correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> repectively.</li>\n<li>In <a href=\"#polar\">polar</a> "dimX" and "dimY" correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> repectively.</li>\n<li>Other dimensions are optional, which can be used in other place. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to viusal (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code>'category'</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n // Each item corresponds to each item in xAxis.data.\n data: [23, 44, 55, 19]\n // In fact, it is the simplification of the format below:\n // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between "value" and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code>'value'</code> or <code>'log'</code>):</p>\n<p> The value can be a <code>number</code> (like <code>12</code>) (can also be a number in a <code>string</code> format, like <code>'12'</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code>'category'</code>):</p>\n<p> The value should be the ordinal of the axis.data (based on <code>0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\"> xAxis: {\n type: 'category',\n data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n },\n yAxis: {\n type: 'category',\n data: ['a', 'b', 'm', 'n', 'p', 'q']\n },\n series: [{\n data: [\n // xAxis yAxis\n [ 0, 0, 2 ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n [ 'Thursday', 2, 1 ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n [ 2, 'p', 2 ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n [ 3, 3, 5 ]\n ]\n }]\n</code></pre>\n<p> There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code>'time'</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code>1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code>'2012-03'</code>, <code>'2012-03-01'</code>, <code>'2012-03-01 05'</code>, <code>'2012-03-01 05:06'</code>.</li>\n<li>separated by <code>"T"</code> or a space: <code>'2012-03-01T12:22:33.123'</code>, <code>'2012-03-01 12:22:33.123'</code>.</li>\n<li>timezone specified: <code>'2012-03-01T12:22:33Z'</code>, <code>'2012-03-01T12:22:33+8000'</code>, <code>'2012-03-01T12:22:33-05:00'</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code>'2012'</code>, <code>'2012-3-1'</code>, <code>'2012/3/1'</code>, <code>'2012/03/01'</code>,\n<code>'2009/6/12 2:00'</code>, <code>'2009/6/12 2:05:08'</code>, <code>'2009/6/12 2:05:08.123'</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code>new Date('2012-01-01')</code> is treated as a Jan 1st 2012 in UTC, while <code>new Date('2012-1-1')</code> and <code>new Date('2012/01/01')</code> are treated as Jan 1st 2012 in local timezone. In safari <code>new Date('2012-1-1')</code> is not supported.</li>\n<li>So if you intent to perform <code>new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code>echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code>value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n 12,\n 24,\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n 33\n]\n// Or\n[\n [12, 332],\n [24, 32],\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code>'-'</code> or <code>null</code> or <code>undefined</code> or <code>NaN</code> can be used to describe that a data item is not exists (ps：<em>not exist</em> does not means its value is <code>0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"date":{"type":["string"],"description":"<p>the time attribute of time and theme.</p>\n"},"value":{"type":["number"],"description":"<p>the value of an event or theme at a time point.</p>\n"},"name":{"type":["string"],"description":"<p>the name of an event or theme.</p>\n<pre><code class=\"lang-js\">data: [\n ["2015/11/09",10,"DQ"],\n ["2015/11/10",10,"DQ"],\n ["2015/11/11",10,"DQ"],\n ["2015/11/08",10,"SS"],\n ["2015/11/09",10,"SS"],\n ["2015/11/10",10,"SS"],\n ["2015/11/11",10,"SS"],\n ["2015/11/12",10,"SS"],\n ["2015/11/13",10,"QG"],\n ["2015/11/08",10,"QG"],\n ["2015/11/11",10,"QG"],\n ["2015/11/13",10,"QG"],\n]\n</code></pre>\n<p><strong>data specification: </strong></p>\n<p>As what is shown above, the data format of theme river is double dimensional array. Each item of the inner array consists of the time attribute , the value at a time point and the name of an event or theme. It needs to be noticed that you should provide an event or theme with a complete time quantum as main river. Other events and themes are based on the main river. The default value of time point should be set as 0. That is to say other events or themes are included in the main river. Once they are beyond the main river, the layout would be wrong. That is because a baseline should be calculated to draw each event as ribbon shape when the whole diagram layout is calculated. As the example above, the event "SS" is a main river. After dispose, we would complete these 3 default time points with the format of ["2015/11/08",0,"DQ"], ["2015/11/12",0,"DQ"], ［"2015/11/13",0,"DQ"］, making it align with the main river. From what is mentioned, we could set default value on any position of a complete time period.</p>\n"}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}},{"type":["Object"],"description":"<p><strong>custom series</strong></p>\n<p><code>custom series</code> supports customizing graphic elements, and then generate more types of charts.</p>\n<p>echarts manages the creation, deletion, animation and interaction with other components (like <a href=\"#dataZoom\">dataZoom</a>、<a href=\"#visualMap\">visualMap</a>), which frees developers from handle those issue themselves.</p>\n<p><strong>For example, a "x-range" chart is made by custom sereis:</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><strong><a href=\"https://ecomfe.github.io/echarts-examples/public/index.html#chart-type-custom\" target=\"_blank\">More samples of custom series</a></strong></p>\n<p><strong><a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Custom%20Series\" target=\"_blank\">A tutotial of custom series</a></strong></p>\n<p><br>\n<strong>Customize the render logic (in renderItem method)</strong></p>\n<p><code>custom series</code> requires developers to write a render logic by themselves. This render logic is called <a href=\"#series-custom.renderItem\">renderItem</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n var categoryIndex = api.value(0);\n var start = api.coord([api.value(1), categoryIndex]);\n var end = api.coord([api.value(2), categoryIndex]);\n var height = api.size([0, 1])[1] * 0.6;\n\n var rectShape = echarts.graphic.clipRectByRect({\n x: start[0],\n y: start[1] - height / 2,\n width: end[0] - start[0],\n height: height\n }, {\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n });\n\n return rectShape && {\n type: 'rect',\n shape: rectShape,\n style: api.style()\n };\n },\n data: data\n }]\n}\n</code></pre>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> will be called on each data item.</p>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.params\">params</a>: provides info about the current series and data and coordinate system.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api\">api</a>: includes some methods.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> method should returns graphic elements definitions.See <a href=\"#series-custom.renderItem.return\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"#series-custom.renderItem\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.api.value\">api.value(...)</a> is used to retrieve value from data. For example, <code>api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api.coord\">api.coord(...)</a> is used to convert data to coordinate. For example, <code>var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"#series-custom.renderItem.arguments.api.size\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"#series-custom.renderItem.arguments.api.style\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"#series-custom.itemStyle\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code>api.style({fill: 'green', stroke: 'yellow'})</code> to override those style settings.</p>\n<p><br>\n<strong>Dimension mapping (by encode and dimension option)</strong></p>\n<p>In most cases, <a href=\"#series-custom.encode\">series.encode</a> is needed to be specified when using <code>custom series</code> serise, which indicate the mapping of dimensions, and then echarts can render appropriate axis by the extent of those data.</p>\n<p><code>encode.tooltip</code> and <code>encode.label</code> can also be specified to define the content of default <code>tooltip</code> and <code>label</code>.\n<a href=\"#series-custom.dimensions\">series.dimensions</a> can also be specified to defined names of each dimensions, which will be displayed in tooltip.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">series: {\n type: 'custom',\n renderItem: function () {\n ...\n },\n encode: {\n x: [2, 4, 3],\n y: 1,\n label: 0,\n tooltip: [2, 4, 3]\n }\n}\n</code></pre>\n<p><br>\n<strong>Controlled by dataZoom</strong></p>\n<p>When use <code>custom series</code> with <a href=\"#dataZoom\">dataZoom</a>, <a href=\"#dataZoom.filterMode\">dataZoom.filterMode</a> usually be set as <code>'weakFilter'</code>, which prevent <code>dataItem</code> from being filtered when only part of its dimensions are out of the current data window.</p>\n<p><br>\n<br>\n<strong>Difference between <code>dataIndex</code> and <code>dataIndexInside</code></strong></p>\n<ul>\n<li><code>dataIndex</code> is the index of a <code>dataItem</code> in the original data.</li>\n<li><code>dataIndexInside</code> is the index of a <code>dataItem</code> in the current data window (see <a href=\"#dataZoom\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> uses <code>dataIndexInside</code> as the input parameter but not <code>dataIndex</code>, because conversion from <code>dataIndex</code> to <code>dataIndexInside</code> is time-consuming.</p>\n<p><br>\n<strong>Event listener</strong></p>\n<pre><code class=\"lang-js\">chart.setOption({\n // ...\n series: {\n type: 'custom',\n renderItem: function () {\n // ...\n return {\n type: 'group',\n children: [{\n type: 'circle'\n // ...\n }, {\n type: 'circle',\n name: 'aaa',\n // User specified info, available\n // in event handler.\n info: 12345,\n // ...\n }]\n };\n }\n }\n});\nchart.on('click', {element: 'aaa'}, function (params) {\n // When the element with name 'aaa' clicked,\n // this method called.\n console.log(params.info);\n});\n</code></pre>\n","properties":{"type":{"type":["string"],"description":"","default":"'custom'"},"id":{"type":["string"],"description":"<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n"},"name":{"type":["string"],"description":"<p>Series name used for displaying in <a href=\"#tooltip\">tooltip</a> and filtering with <a href=\"#legend\">legend</a>, or updaing data and configuration with <code>setOption</code>.</p>\n"},"legendHoverLink":{"type":["boolean"],"description":"<p>Whether to enable highlighting chart when <a href=\"#legend\">legend</a> is being hovered.</p>\n","default":true},"coordinateSystem":{"type":["string"],"description":"<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code>null</code> or <code>'none'</code></p>\n<p> No coordinate.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'cartesian2d'</code></p>\n<p> Use a two-dimensional rectangular coordinate (also known as Cartesian coordinate), with <a href=\"#series-custom.xAxisIndex\">xAxisIndex</a> and <a href=\"#series-custom.yAxisIndex\">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'polar'</code></p>\n<p> Use polar coordinates, with <a href=\"#series-custom.polarIndex\">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'geo'</code></p>\n<p> Use geographic coordinate, with <a href=\"#series-custom.geoIndex\">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n<ul>\n<li><p><code>'none'</code></p>\n<p> Do not use coordinate system.</p>\n</li>\n</ul>\n","default":"'cartesian2d'"},"xAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#xAxis\">x axis</a> to combine with, which is useful for multiple x axes in one chart.</p>\n","default":0},"yAxisIndex":{"type":["number"],"description":"<p>Index of <a href=\"#yAxis\">y axis</a> to combine with, which is useful for multiple y axes in one chart.</p>\n","default":0},"polarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#polar\">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n","default":0},"geoIndex":{"type":["number"],"description":"<p>Index of <a href=\"#geo\">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n","default":0},"calendarIndex":{"type":["number"],"description":"<p>Index of <a href=\"#calendar\">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n","default":0},"renderItem":{"type":["Function"],"description":"<p><code>custom series</code> requires developers to write a render logic by themselves. This render logic is called <a href=\"#series-custom.renderItem\">renderItem</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">var option = {\n ...,\n series: [{\n type: 'custom',\n renderItem: function (params, api) {\n var categoryIndex = api.value(0);\n var start = api.coord([api.value(1), categoryIndex]);\n var end = api.coord([api.value(2), categoryIndex]);\n var height = api.size([0, 1])[1] * 0.6;\n\n var rectShape = echarts.graphic.clipRectByRect({\n x: start[0],\n y: start[1] - height / 2,\n width: end[0] - start[0],\n height: height\n }, {\n x: params.coordSys.x,\n y: params.coordSys.y,\n width: params.coordSys.width,\n height: params.coordSys.height\n });\n\n return rectShape && {\n type: 'rect',\n shape: rectShape,\n style: api.style()\n };\n },\n data: data\n }]\n}\n</code></pre>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> will be called on each data item.</p>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.params\">params</a>: provides info about the current series and data and coordinate system.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api\">api</a>: includes some methods.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem\">renderItem</a> method should returns graphic elements definitions.See <a href=\"#series-custom.renderItem.return\">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href=\"#series-custom.renderItem\">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.arguments.api.value\">api.value(...)</a> is used to retrieve value from data. For example, <code>api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href=\"#series-custom.renderItem.arguments.api.coord\">api.coord(...)</a> is used to convert data to coordinate. For example, <code>var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href=\"#series-custom.renderItem.arguments.api.size\">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href=\"#series-custom.renderItem.arguments.api.style\">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href=\"#series-custom.itemStyle\">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code>api.style({fill: 'green', stroke: 'yellow'})</code> to override those style settings.</p>\n","properties":{"arguments":{"type":["*"],"description":"<p>Parameters of <code>renderItem</code>.</p>\n","properties":{"params":{"type":["Object"],"description":"<p>The first parameter of <code>renderItem</code>, including:</p>\n<pre><code class=\"lang-js\">{\n context: // {string} An object that developers can store something temporarily here. Life cycle: current round of rendering.\n seriesId: // {string} The id of this series.\n seriesName: // {string} The name of this series.\n seriesIndex: // {number} The index of this series.\n dataIndex: // {number} The index of this data item.\n dataIndexInside: // {number} The index of this data item in the current data window (see dataZoom).\n dataInsideLength: // {number} The count of data in the current data window (see dataZoom).\n actionType: // {string} The type of action that trigger this render.\n coordSys: // coordSys is variable by different types of coordinate systems:\n coordSys: {\n type: 'cartesian2d',\n x: // {number} x of grid rect\n y: // {number} y of grid rect\n width: // {number} width of grid rect\n height: // {number} height of grid rect\n },\n coordSys: {\n type: 'calendar',\n x: // {number} x of calendar rect\n y: // {number} y of calendar rect\n width: // {number} width of calendar rect\n height: // {number} height of calendar rect\n cellWidth: // {number} calendar cellWidth\n cellHeight: // {number} calendar cellHeight\n rangeInfo: {\n start: // date start of calendar.\n end: // date end of calendar.\n weeks: // number of weeks in calendar.\n dayCount: // day count in calendar.\n }\n },\n coordSys: {\n type: 'geo',\n x: // {number} x of geo rect\n y: // {number} y of geo rect\n width: // {number} width of geo rect\n height: // {number} height of geo rect\n zoom: // {number} zoom ratio, 1 if no zoom, 0.5 means shrink to 50%.\n },\n coordSys: {\n type: 'polar',\n cx: // {number} x of polar center.\n cy: // {number} y of polar center.\n r: // {number} outer radius of polar.\n r0: // {number} inner radius of polar.\n },\n coordSys: {\n type: 'singleAxis',\n x: // {number} x of singleAxis rect\n y: // {number} y of singleAxis rect\n width: // {number} width of singleAxis rect\n height: // {number} height of singleAxis rect\n }\n}\n</code></pre>\n<p>Difference between <code>dataIndex</code> and <code>dataIndexInside</code>:</p>\n<ul>\n<li><code>dataIndex</code> is the index of a <code>dataItem</code> in the original data.</li>\n<li><code>dataIndexInside</code> is the index of a <code>dataItem</code> in the current data window (see <a href=\"#dataZoom\">dataZoom</a>.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.arguments.api\">renderItem.arguments.api</a> uses <code>dataIndexInside</code> as the input parameter but not <code>dataIndex</code>, because conversion from <code>dataIndex</code> to <code>dataIndexInside</code> is time-consuming.</p>\n"},"api":{"type":["Object"],"description":"<p>The second parameter of <code>renderItem</code>.</p>\n","properties":{"value":{"type":["Function"],"description":"<p>Get value on the given dimension.</p>\n<pre><code>@param {number} dimension The given dimension. (index from 0).\n@param {number} [dataIndexInside] In most cases it is not necessary.\n@return {number} The value.\n</code></pre>"},"coord":{"type":["Function"],"description":"<p>Convert data to coordinate.</p>\n<pre><code>@param {Array.<number>} data.\n@return {Array.<number>} Point on canvas, at least includes [x, y].\n In polar, it also contains:\n polar: [x, y, radius, angle]\n</code></pre>"},"size":{"type":["Function"],"description":"<p>Get the size by the given data range.</p>\n<p>For example, in <code>cartesian2d</code>, suppose calling <code>api.size([2, 4])</code> returns <code>[12.4, 55]</code>. It represents that on x axis, data range <code>2</code> corresponds to size <code>12.4</code>, and on y axis data range <code>4</code> corresponds to size <code>55</code>.</p>\n<p>In some coordinate systems (for example, polar) or when log axis is used, the size is different in different point. So the second parameter is necessary to calculate size on the given point.</p>\n<pre><code>@param {Array.<number>} dataSize Data range。\n@param {Array.<number>} dataItem The point where the size will be calculated.\n@return {Array.<number>} The size.\n</code></pre>"},"style":{"type":["Function"],"description":"<p>The method obtains style info defined in <a href=\"#series-custom.itemStyle\">series.itemStyle</a>, and visual info obtained by visual mapping, and return them. Those returned info can be assigned to <code>style</code> attribute of graphic element definition directly. Developers can also override style info by calling this method like this: <code>api.style({fill: 'green', stroke: 'yellow'})</code>.</p>\n<pre><code>@param {Object} [extra] Extra style info.\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {Object} Style info, which can be assigned to `style` attribute of graphic element definition directly.\n</code></pre>"},"styleEmphasis":{"type":["Function"],"description":"<p>The method obtains style info defined in <a href=\"#series-custom.itemStyle.emphasis\">series.itemStyle.emphasis</a>, and visual info obtained by visual mapping, and return them. Those returned info can be assigned to <code>style</code> attribute of graphic element definition directly. Developers can also override style info by calling this method like this: <code>api.style({fill: 'green', stroke: 'yellow'})</code>.</p>\n<pre><code>@param {Object} [extra] Extra style info.\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {Object} Style info, which can be assigned to `style` attribute of graphic element definition directly.\n</code></pre>"},"visual":{"type":["Function"],"description":"<p>Get the visual info. It is rarely be used.</p>\n<pre><code>@param {string} visualType 'color', 'symbol', 'symbolSize', ...\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {string|number} The value of visual.\n</code></pre>"},"barLayout":{"type":["Function"],"description":"<p>When <code>barLayout</code> is needed, (for example, when attaching some extra graphic elements to bar chart), this method can be used to obtain bar layout info.</p>\n<p>See a <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-bar-trend\" target=\"_blank\">sample</a>.</p>\n<pre><code>@param {Object} opt\n@param {number} opt.count How many bars in each group.\n@param {number} [opt.barWidth] Width of a bar.\n@param {number} [opt.barMaxWidth] Max width of a bar.\n@param {number} [opt.barGap] Gap of bars in a group.\n@param {number} [opt.barCategoryGap] Gap of groups.\n@return {Array.<Object>} [{\n width: {number} Width of a bar.\n offset: {number} Offset of a bar, based on the left most edge.\n offsetCenter: {number} bar Offset of a bar, based on the center of the bar.\n }, ...]\n</code></pre>"},"currentSeriesIndices":{"type":["Function"],"description":"<p>Obtain the current series index. Notice that the <code>currentSeriesIndex</code> is different from <code>seriesIndex</code> when legend is used to filter some series.</p>\n<pre><code>@return {number}\n</code></pre>"},"font":{"type":["Function"],"description":"<p>Obtain font string, which can be used on style setting directly.</p>\n<pre><code>@param {Object} opt\n@param {string} [opt.fontStyle]\n@param {number} [opt.fontWeight]\n@param {number} [opt.fontSize]\n@param {string} [opt.fontFamily]\n@return {string} font string.\n</code></pre>"},"getWidth":{"type":["Function"],"description":"<pre><code>@return {number} Width of echarts containter.\n</code></pre>"},"getHeight":{"type":["Function"],"description":"<pre><code>@return {number} Height of echarts container.\n</code></pre>"},"getZr":{"type":["Function"],"description":"<pre><code>@return {module:zrender} zrender instance.\n</code></pre>"},"getDevicePixelRatio":{"type":["Function"],"description":"<pre><code>@return {number} The current devicePixelRatio。\n</code></pre>"}}}}},"return":{"type":["Object"],"description":"<p><code>renderItem</code> should returns graphic element definitions. Each graphic element is an object. See <a href=\"#graphic.elements\">graphic</a> for detailed info. (But width\\height\\top\\bottom is not supported here)</p>\n<p>If nothing should be rendered in this data item, just returns nothing.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">// Returns a rectangular.\n{\n type: 'rect',\n shape: {\n x: x, y: y, width: width, height: height\n },\n style: api.style()\n}\n</code></pre>\n<pre><code class=\"lang-js\">// Returns a group of elements.\n{\n type: 'group',\n // If diffChildrenByName is set as `true`, `child.name` will be used\n // to diff children, which improves animation transition but degrade\n // performance. The default value is `false`.\n // diffChildrenByName: true,\n children: [{\n type: 'circle',\n shape: {\n cx: cx, cy: cy, r: r\n },\n style: api.style()\n }, {\n type: 'line',\n shape: {\n x1: x1, y1: y1, x2: x2, y2: y2\n },\n style: api.style()\n }]\n}\n</code></pre>\n"},"return_group":{"type":["Object"],"description":"<p><code>group</code> is the only type that can contain children, so that a group of elements can be positioned and transformed together.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"group"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"width":{"type":["number"],"description":"<p>Specify width of this <code>group</code>.</p>\n<p>This width is only used for the positioning of its children.</p>\n<p>When width is <code>0</code>, children can also be positioned according to its parent using <code>left: 'center'</code>.</p>\n","default":0},"height":{"type":["number"],"description":"<p>Specify height of this <code>group</code>.</p>\n<p>This height is only used for the positioning of its children.</p>\n<p>When height is <code>0</code>, children can also be positioned according to its parent using <code>top: 'middle'</code>.</p>\n","default":0},"diffChildrenByName":{"type":["boolean"],"description":"<p>In <a href=\"#series-custom\">custom series</a>, when <code>diffChildrenByName</code> is set as <code>true</code>, for each <a href=\"#series-custom.renderItem.return_group\">group</a> returned from <a href=\"#series-custom.renderItem\">renderItem</a>, "diff" will be performed to its <a href=\"#series-custom.renderItem.return_group.children\">children</a> according to the <a href=\"#series-custom.renderItem.return_polygon.name\">name</a> attribute of each graphic elements. Here "diff" means that map the coming graphic elements to the existing graphic elements when repainting according to <code>name</code>, which enables the transition animation if data is modified.</p>\n<p>But notice that the operation is performance consuming, do not use it for large data amount.</p>\n","default":false},"children":{"type":["Array"],"description":"<p>A list of children, each item is a declaration of an element.</p>\n"},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_path":{"type":["Object"],"description":"<p>Use <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> to describe a path. Can be used to draw icons or any other shapes fitting the specified size by auto transforming.</p>\n<p>See examples:\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> and <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>.</p>\n<p>About width/height, cover/contain, see\n<a href=\"#series-custom.renderItem.return_path.shape.layout\">layout</a>.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"path"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"pathData":{"type":["string"],"description":"<p><a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>.</p>\n<p>For example, <code>'M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z'</code>。</p>\n<p>If <a href=\"#series-custom.renderItem.return_path.shape.width\">width</a>, <a href=\"#series-custom.renderItem.return_path.shape.height\">height</a>, <a href=\"#series-custom.renderItem.return_path.shape.x\">x</a> and <a href=\"#series-custom.renderItem.return_path.shape.y\">y</a> specified, <code>pathData</code> will be transformed to fit the defined rect. If they are not specified, do not do that.</p>\n<p><a href=\"#series-custom.renderItem.return_path.shape.layout\">layout</a> can be used to specify the transform strategy.</p>\n<p>See examples:\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> and <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>.</p>\n"},"d":{"type":["string"],"description":"<p>Alias of <a href=\"#series-custom.renderItem.return_path.shape.pathData\">pathData</a>.</p>\n"},"layout":{"type":["string"],"description":"<p>If <a href=\"#series-custom.renderItem.return_path.shape.width\">width</a>, <a href=\"#series-custom.renderItem.return_path.shape.height\">height</a>, <a href=\"#series-custom.renderItem.return_path.shape.x\">x</a> and <a href=\"#series-custom.renderItem.return_path.shape.y\">y</a> specified, <code>pathData</code> will be transformed to fit the defined rect.</p>\n<p><code>layout</code> can be used to specify the transform strategy.</p>\n<p>Optional value:</p>\n<ul>\n<li><code>'center'</code>: Keep aspect ratio, put the path in the center of the rect, expand as far as possible but never overflow.</li>\n<li><code>'cover'</code>: Transform the path according to the aspect ratio of the rect, fill the rect and do not overflow.</li>\n</ul>\n","default":"'center'"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_image":{"type":["Object"],"description":"","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"image"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"style":{"type":["Object"],"description":"","properties":{"image":{"type":["string"],"description":"<p>Specify contant of the image, can be a URL, or <a href=\"https://tools.ietf.org/html/rfc2397\" target=\"_blank\">dataURI</a>.</p>\n"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","default":0},"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_text":{"type":["Object"],"description":"<p>Text block.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"text"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"style":{"type":["Object"],"description":"","properties":{"text":{"type":["string"],"description":"<p>Text content. <code>\\n</code> can be used as a line break.</p>\n","default":"''"},"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"font":{"type":["string"],"description":"<p>Font size, font type, font weight, font color, follow the form of <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/font\" target=\"_blank\">css font</a>.</p>\n<p>For example:</p>\n<pre><code>// size | family\nfont: '2em "STHeiti", sans-serif'\n\n// style | weight | size | family\nfont: 'italic bolder 16px cursive'\n\n// weight | size | family\nfont: 'bolder 2em "Microsoft YaHei", sans-serif'\n</code></pre>"},"textAlign":{"type":["string"],"description":"<p>Text horizontal alignment. Optional values: <code>'left'</code>, <code>'center'</code>, <code>'right'</code>.</p>\n<p><code>'left'</code> means the left side of the text block is specified by the <a href=\"#series-custom.renderItem.return_text.style.x\">style.x</a>, while <code>'right'</code> means the right side of the text block is specified by <a href=\"#series-custom.renderItem.return_text.style.y\">style.y</a>.</p>\n","default":"'left'"},"textVerticalAlign":{"type":["string"],"description":"<p>Text vertical alignment. Optional values: <code>'top'</code>, <code>'middle'</code>, <code>'bottom'</code>.</p>\n<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n"},"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_rect":{"type":["Object"],"description":"<p>Rectangle element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"rect"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x":{"type":["number"],"description":"<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"y":{"type":["numbr"],"description":"<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n","default":0},"width":{"type":["number"],"description":"<p>The width of the shape of the element.</p>\n","default":0},"height":{"type":["numbr"],"description":"<p>The height of the shape of the element.</p>\n","default":0},"r":{"type":["Array"],"description":"<p>Specify border radius of the rectangular here. Generally, <code>r</code> should be <code>[topLeftRadius, topRightRadius, BottomRightRadius, bottomLeftRadius]</code>, where each item is a number.</p>\n<p>Abbreviation is enabled, for example:</p>\n<ul>\n<li><code>r</code>: <code>1</code> means <code>[1, 1, 1, 1]</code></li>\n<li><code>r</code>: <code>[1]</code> means <code>[1, 1, 1, 1]</code></li>\n<li><code>r</code>: <code>[1, 2]</code> means <code>[1, 2, 1, 2]</code></li>\n<li><code>r</code>: <code>[1, 2, 3]</code> means <code>[1, 2, 3, 2]</code></li>\n</ul>\n"}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_circle":{"type":["Object"],"description":"<p>Circle element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"circle"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_ring":{"type":["Object"],"description":"<p>Ring element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"ring"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_sector":{"type":["Object"],"description":"<p>Sector element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"sector"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>start angle, in radian.</p>\n","default":0},"endAngle":{"type":["number"],"description":"<p>end anble, in radian.</p>\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"<p>Whether draw clockwise.</p>\n","default":true}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_arc":{"type":["Object"],"description":"<p>Arc element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"arc"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"cx":{"type":["number"],"description":"<p>The x value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"cy":{"type":["numbr"],"description":"<p>The y value of the center of the element in the coordinate system of its parent.</p>\n","default":0},"r":{"type":["number"],"description":"<p>Outside radius.</p>\n","default":0},"r0":{"type":["number"],"description":"<p>Inside radius.</p>\n","default":0},"startAngle":{"type":["number"],"description":"<p>start angle, in radian.</p>\n","default":0},"endAngle":{"type":["number"],"description":"<p>end anble, in radian.</p>\n","default":"Math.PI * 2"},"clockwise":{"type":["boolean"],"description":"<p>Whether draw clockwise.</p>\n","default":true}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":1},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_polygon":{"type":["Object"],"description":"<p>Polygon element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"polygon"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"<p>A list of points, which defines the shape, like <code>[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"type":["number","string"],"description":"<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code>[0, 1]</code>.</li>\n<li>If the value is <code>'spline'</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code>smooth</code> is <code>number</code> (bezier smooth).</p>\n","default":false}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_polyline":{"type":["Object"],"description":"<p>Polyline element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"polyline"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"points":{"type":["Array"],"description":"<p>A list of points, which defines the shape, like <code>[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n"},"smooth":{"type":["number","string"],"description":"<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code>[0, 1]</code>.</li>\n<li>If the value is <code>'spline'</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n","default":"undefined"},"smoothConstraint":{"type":["boolean"],"description":"<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code>smooth</code> is <code>number</code> (bezier smooth).</p>\n","default":false}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":5},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_line":{"type":["Object"],"description":"<p>Line element.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"line"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"<p>x value of the start point.</p>\n","default":0},"y1":{"type":["number"],"description":"<p>y value of the start point.</p>\n","default":0},"x2":{"type":["number"],"description":"<p>x value of the end point.</p>\n","default":0},"y2":{"type":["number"],"description":"<p>y value of the end point.</p>\n","default":0},"percent":{"type":["number"],"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n","default":1}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":null},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":"\"#000\""},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":5},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}},"return_bezierCurve":{"type":["Object"],"description":"<p>Quadratic bezier curve or cubic bezier curve.</p>\n","properties":{"type":{"type":["string"],"description":"<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href=\"#series-custom.renderItem.return_image\">image</a>,\n<a href=\"#series-custom.renderItem.return_text\">text</a>,\n<a href=\"#series-custom.renderItem.return_circle\">circle</a>,\n<a href=\"#series-custom.renderItem.return_sector\">sector</a>,\n<a href=\"#series-custom.renderItem.return_ring\">ring</a>,\n<a href=\"#series-custom.renderItem.return_polygon\">polygon</a>,\n<a href=\"#series-custom.renderItem.return_polyline\">polyline</a>,\n<a href=\"#series-custom.renderItem.return_rect\">rect</a>,\n<a href=\"#series-custom.renderItem.return_line\">line</a>,\n<a href=\"#series-custom.renderItem.return_bezierCurve\">bezierCurve</a>,\n<a href=\"#series-custom.renderItem.return_arc\">arc</a>,\n<a href=\"#series-custom.renderItem.return_group\">group</a>,</p>\n","default":"bezierCurve"},"id":{"type":["string"],"description":"<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n","default":"undefined"},"position":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"rotation":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":0},"scale":{"type":["Array"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[1, 1]"},"origin":{"type":["number"],"description":"<p><code>2D transform</code> can be applied to graphic elements, including:</p>\n<ul>\n<li><a href=\"#series-custom.renderItem.return_polygon.position\">position</a>: <code>[horizontal translate offset, vertical translate offset]</code>, <code>[0, 0]</code> by default. Positive value means translate towards right or bottom.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.rotation\">rotation</a>: Rotation in radian, <code>0</code> by default. Positive when anticlockwise.</li>\n<li><a href=\"#series-custom.renderItem.return_polygon.scale\">scale</a>: <code>[horizontal scale factor, vertical scale factor]</code>, <code>[1, 1]</code> by default.</li>\n</ul>\n<p><a href=\"#series-custom.renderItem.return_polygon.origin\">origin</a> specifies the origin point of rotation and scaling, <code>[0, 0]</code> by default.</p>\n<p>Notice:</p>\n<ul>\n<li>The coordinates specified in the transform attribute above are relative to the <code>[0, 0]</code> of the parent element (that is, <a href=\"#series-custom.renderItem.return_group\">group</a> or the root canvas). Thus we are able to <a href=\"#series-custom.renderItem.return_group\">group</a> multiple elements, and <a href=\"#series-custom.renderItem.return_group\">groups</a> can be nested.</li>\n<li>The order that the transform attributes are applied to a single graphic element is: Firstly, <code>rotation</code>, then, <code>scale</code>, finally, <code>position</code>.</li>\n</ul>\n","default":"[0, 0]"},"z2":{"type":["number"],"description":"<p>Define the overlap relationship between graphic elements.</p>\n","default":"undefined"},"name":{"type":["string"],"description":"<p>See <a href=\"#series-custom.renderItem.return_polygon.diffChildrenByName\">diffChildrenByName</a>。</p>\n","default":"undefined"},"info":{"type":["*"],"description":"<p>User defined data, can be visited in event listeners.</p>\n<pre><code class=\"lang-js\">chart.on('click', function (params) {\n console.log(params.info);\n});\n</code></pre>\n"},"silent":{"type":["boolean"],"description":"<p>Whether response to mouse events / touch events.</p>\n","default":false},"invisible":{"type":["boolean"],"description":"<p>Whether the element is visible.</p>\n","default":false},"ignore":{"type":["boolean"],"description":"<p>Whether the element is totally ignored (neither render nor listen events).</p>\n","default":false},"shape":{"type":["Object"],"description":"","properties":{"x1":{"type":["number"],"description":"<p>x value of the start point.</p>\n","default":0},"y1":{"type":["number"],"description":"<p>y value of the start point.</p>\n","default":0},"x2":{"type":["number"],"description":"<p>x value of the end point.</p>\n","default":0},"y2":{"type":["number"],"description":"<p>y value of the end point.</p>\n","default":0},"cpx1":{"type":["number"],"description":"<p>x of control point.</p>\n","default":0},"cpy1":{"type":["number"],"description":"<p>y of control point.</p>\n","default":0},"cpx2":{"type":["number"],"description":"<p>x of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code>cpx2</code> and <code>cpy2</code> are not set, quatratic bezier is used.</p>\n","default":null},"cpy2":{"type":["number"],"description":"<p>y of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code>cpx2</code> and <code>cpy2</code> are not set, quatratic bezier is used.</p>\n","default":null},"percent":{"type":["number"],"description":"<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n","default":1}}},"style":{"type":["Object"],"description":"<p>More attributes in <code>style</code> (for example, <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Rich%20Text\" target=\"_blank\">rich text</a>), see the <code>style</code> related attributes in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable\" target=\"_blank\">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code>style</code> of graphic elements is derived from <code>zrender</code>, which may be different from the attribute names in <code>echarts label</code>, <code>echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href=\"#series-scatter.label.color\">itemStyle.color</a> => <code>style.fill</code></li>\n<li><a href=\"#series-scatter.label.color\">itemStyle.borderColor</a> => <code>style.stroke</code></li>\n<li><a href=\"#series-scatter.label.color\">label.color</a> => <code>style.textFill</code></li>\n<li><a href=\"#series-scatter.label.textBorderColor\">label.textBorderColor</a> => <code>style.textStroke</code></li>\n<li>...</li>\n</ul>\n","properties":{"fill":{"type":["string"],"description":"<p>Color filled in this element.</p>\n","default":"'#000'"},"stroke":{"type":["string"],"description":"<p>Color of stroke.</p>\n","default":null},"lineWidth":{"type":["number"],"description":"<p>Width of stroke.</p>\n","default":0},"shadowBlur":{"type":["number"],"description":"<p>Width of shadow.</p>\n","default":"undefined"},"shadowOffsetX":{"type":["number"],"description":"<p>X offset of shadow.</p>\n","default":"undefined"},"shadowOffsetY":{"type":["number"],"description":"<p>Y offset of shadow.</p>\n","default":"undefined"},"shadowColor":{"type":["number"],"description":"<p>color of shadow.</p>\n","default":"undefined"}}},"styleEmphasis":{"type":["Object"],"description":"<p>Empahsis style of the graphic element, whose structure is the same as <a href=\"#series-custom.renderItem.return_polygon.style\">style</a>.</p>\n"}}}}},"itemStyle":{"type":["Object"],"description":"<p>Graphic style of , <code>emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> color. Color is taken from <a href=\"#color\">option.color Palette</a> by default. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"dimensions":{"type":["Array"],"description":"<p><code>dimensions</code> can be used to define dimension info for <code>series.data</code> or <code>dataset.source</code>.</p>\n<p>Notice: if <a href=\"#dataset\">dataset</a> is used, we can provide dimension names in the first column/row of <a href=\"#dataset.source\">dataset.source</a>, and not need to specify <code>dimensions</code> here. But if <code>dimensions</code> is specified here, echarts will not retrieve dimension names from the first row/column of <code>dataset.source</code> any more.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // Specify name for each dimesions, which will be displayed in tooltip.\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: [\n null, // If you do not intent to defined this dimension, use null is fine.\n {type: 'ordinal'}, // Specify type of this dimension.\n // 'ordinal' is always used in string.\n // If type is not specified, echarts will guess type by data.\n {name: 'good', type: 'number'},\n 'bad' // Equals to {name: 'bad'}.\n ]\n}\n</code></pre>\n<p>Each data item of <code>dimensions</code> can be:</p>\n<ul>\n<li><code>string</code>, for example, <code>'someName'</code>, which equals to <code>{name: 'someName'}</code>.</li>\n<li><code>Object</code>, where the attributes can be:<ul>\n<li>name: <code>string</code>.</li>\n<li>type: <code>string</code>, supports:<ul>\n<li><code>number</code></li>\n<li><code>float</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a></li>\n<li><code>int</code>, that is, <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a></li>\n<li><code>ordinal</code>, discrete value, which represents string generally.</li>\n<li><code>time</code>, time value, see <a href=\"#series.data\">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code>string</code>, generally used in tooltip for dimension display. If not specified, use <code>name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code>dimensions</code> is specified, the default <code>tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code>tooltip</code> will displayed only value horizontally.</p>\n"},"encode":{"type":["Object"],"description":"<p>Define what is encoded to for each dimension of <code>data</code>. For example:</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // Each column is called a dimension.\n // There are five dimensions: 0, 1, 2, 3, 4。\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n encode: {\n x: [3, 1, 5], // Dimension 3, 1, 5 is mapped to x axis.\n y: 2, // Dimension 2 is mapped to y axis.\n tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n }\n }\n}\n</code></pre>\n<p>When <a href=\"#series.dimensions\">dimensions</a> is used to defined name for a certain dimension, <code>encode</code> can refer the name directly. For example:</p>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: ['date', 'open', 'close', 'highest', 'lowest'],\n encode: {\n x: 'date',\n y: ['open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<p>The basic structure of <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code>'x'</code>, <code>'y'</code>, <code>'radius'</code>, <code>'angle'</code> or some special reserved names like "tooltip", "itemName" etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code>encode</code> listed as follows:</p>\n<pre><code class=\"lang-js\">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n // Display dimension "product" and "score" in the tooltip.\n tooltip: ['product', 'score']\n // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n // (sometimes the dimension names are too long to type in series.name manually).\n seriesName: [1, 3],\n // Using dimensions[2] as the id of each data item. This is useful when dynamically\n // update data by `chart.setOption()`, where the new and old data item can be\n // corresponded by id, by which the appropriate animation can be performed when updating.\n itemId: 2,\n // Using dimensions[3] as the name of each data item. This is useful in charts like\n // 'pie', 'funnel', where data item name can be displayed in legend.\n itemName: 3\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n // Map dimensions[1], dimensions[5] and dimension "score" to the X axis.\n x: [1, 5, 'score'],\n // Map dimensions[0] to the Y axis.\n y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n radius: 3,\n angle: 2,\n ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like 'pie', 'funnel' etc.:\nencode: {\n value: 3\n}\n</code></pre>\n<p>This is an <a href=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" target=\"_blank\">example</a> for <code>encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code>encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href=\"#dataZoom\">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class=\"lang-js\">var option = {\n xAxis: {},\n yAxis: {},\n dataZoom: [{\n xAxisIndex: 0\n }, {\n yAxisIndex: 0\n }],\n series: {\n type: 'custom',\n renderItem: function (params, api) {\n return {\n type: 'circle',\n shape: {\n cx: 100, // x position is always 100\n cy: api.coord([0, api.value(0)])[1],\n r: 30\n },\n style: {\n fill: 'blue'\n }\n };\n },\n encode: {\n // Then the series will not be controlled\n // by x axis and corresponding dataZoom.\n x: -1,\n y: 1\n },\n data: [ ... ]\n }\n};\n</code></pre>\n"},"seriesLayoutBy":{"type":["string"],"description":"<p>When <a href=\"#dataset\">dataset</a> is used, <code>seriesLayoutBy</code> specifies whether the column or the row of <code>dataset</code> is mapped to the series, namely, the series is "layout" on columns or rows. Optional values:</p>\n<ul>\n<li>'column': by default, the columns of <code>dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>'row'：the rows of <code>dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href=\"https://ecomfe.github.io/echarts-examples/public/editor.html?c=dataset-series-layout-by\" target=\"_blank\">example</a>.</p>\n","default":"'column'"},"datasetIndex":{"type":["number"],"description":"<p>If <a href=\"#series.data\">series.data</a> is not specified, and <a href=\"#dataset\">dataset</a> exists, the series will use <code>dataset</code>. <code>datasetIndex</code> specifies which dataset will be used.</p>\n","default":0},"data":{"type":["Array"],"description":"<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code>data</code> specified in series, and there is <a href=\"#dataset\">dataset</a> in option, series will use the first <a href=\"#dataset\">dataset</a> as its datasource. If <code>data</code> has been specified, <a href=\"#dataset\">dataset</a> will not used.</p>\n<p><code>series.datasetIndex</code> can be used to specify other <a href=\"#dataset\">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each colum is named as a "dimension".</p>\n<pre><code class=\"lang-js\">series: [{\n data: [\n // dimX dimY other dimensions ...\n [ 3.4, 4.5, 15, 43],\n [ 4.2, 2.3, 20, 91],\n [ 10.8, 9.5, 30, 18],\n [ 7.2, 8.8, 18, 57]\n ]\n}]\n</code></pre>\n<ul>\n<li>In <a href=\"#grid\">cartesian (grid)</a>, "dimX" and "dimY" correspond to <a href=\"#xAxis\">xAxis</a> and <a href=\"#yAxis\">yAxis</a> repectively.</li>\n<li>In <a href=\"#polar\">polar</a> "dimX" and "dimY" correspond to <a href=\"#radiusAxis\">radiusAxis</a> 和 <a href=\"#anbleAxis\">angleAxis</a> repectively.</li>\n<li>Other dimensions are optional, which can be used in other place. For example:<ul>\n<li><a href=\"#visualMap\">visualMap</a> can map one or more dimensions to viusal (color, symbol size ...).</li>\n<li><a href=\"#series.symbolSize\">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href=\"#tooltip.formatter\">tooltip.formatter</a> or <a href=\"#series.label.formatter\">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code>'category'</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class=\"lang-js\">xAxis: {\n data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n // Each item corresponds to each item in xAxis.data.\n data: [23, 44, 55, 19]\n // In fact, it is the simplification of the format below:\n // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between "value" and <a href=\"#xAxis.type\">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code>'value'</code> or <code>'log'</code>):</p>\n<p> The value can be a <code>number</code> (like <code>12</code>) (can also be a number in a <code>string</code> format, like <code>'12'</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code>'category'</code>):</p>\n<p> The value should be the ordinal of the axis.data (based on <code>0</code>), the string value of the axis.data. For example:</p>\n<pre><code class=\"lang-js\"> xAxis: {\n type: 'category',\n data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday']\n },\n yAxis: {\n type: 'category',\n data: ['a', 'b', 'm', 'n', 'p', 'q']\n },\n series: [{\n data: [\n // xAxis yAxis\n [ 0, 0, 2 ], // This point is located at xAxis: 'Monday', yAxis: 'a'.\n [ 'Thursday', 2, 1 ], // This point is located at xAxis: 'Thursday', yAxis: 'm'.\n [ 2, 'p', 2 ], // This point is located at xAxis: 'Wednesday', yAxis: 'p'.\n [ 3, 3, 5 ]\n ]\n }]\n</code></pre>\n<p> There is an example of double category axes: <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-punchCard\" target=\"_blank\">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code>'time'</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code>1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href=\"http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15\" target=\"_blank\">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code>'2012-03'</code>, <code>'2012-03-01'</code>, <code>'2012-03-01 05'</code>, <code>'2012-03-01 05:06'</code>.</li>\n<li>separated by <code>"T"</code> or a space: <code>'2012-03-01T12:22:33.123'</code>, <code>'2012-03-01 12:22:33.123'</code>.</li>\n<li>timezone specified: <code>'2012-03-01T12:22:33Z'</code>, <code>'2012-03-01T12:22:33+8000'</code>, <code>'2012-03-01T12:22:33-05:00'</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code>'2012'</code>, <code>'2012-3-1'</code>, <code>'2012/3/1'</code>, <code>'2012/03/01'</code>,\n<code>'2009/6/12 2:00'</code>, <code>'2009/6/12 2:05:08'</code>, <code>'2009/6/12 2:05:08.123'</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code>new Date('2012-01-01')</code> is treated as a Jan 1st 2012 in UTC, while <code>new Date('2012-1-1')</code> and <code>new Date('2012/01/01')</code> are treated as Jan 1st 2012 in local timezone. In safari <code>new Date('2012-1-1')</code> is not supported.</li>\n<li>So if you intent to perform <code>new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href=\"https://momentjs.com/\" target=\"_blank\">moment</a>), or use <code>echarts.number.parseDate</code>, or check <a href=\"http://dygraphs.com/date-formats.html\" target=\"_blank\">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code>value</code> reprensent real value. For example:</p>\n<pre><code class=\"lang-js\">[\n 12,\n 24,\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n 33\n]\n// Or\n[\n [12, 332],\n [24, 32],\n {\n value: [24, 32],\n // label style, only works in this data item.\n label: {},\n // item style, only works in this data item.\n itemStyle:{}\n },\n [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code>'-'</code> or <code>null</code> or <code>undefined</code> or <code>NaN</code> can be used to describe that a data item is not exists (ps：<em>not exist</em> does not means its value is <code>0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n","items":{"type":"Object","properties":{"name":{"type":["string"],"description":"<p>Name of data item.</p>\n"},"value":{"type":["number"],"description":"<p>Value of data item.</p>\n"},"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}},"emphasis":{"type":["Object"],"description":"","properties":{"itemStyle":{"type":["Object"],"description":"","properties":{"color":{"type":["Color"],"description":"<p> color. </p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","default":null},"borderColor":{"type":["Color"],"description":"<p> border color, whose format is similar to that of <code>color</code>.</p>\n","default":"\"#000\""},"borderWidth":{"type":["number"],"description":"<p> border width. No border when it is set to be 0.</p>\n","default":0},"borderType":{"type":["string"],"description":"<p>Border type, which can be <code>'solid'</code>, <code>'dashed'</code>, or <code>'dotted'</code>. <code>'solid'</code> by default.</p>\n","default":"'solid'"},"shadowBlur":{"type":["number"],"description":"<p>Size of shadow blur. This attribute should be used along with <code>shadowColor</code>,<code>shadowOffsetX</code>, <code>shadowOffsetY</code> to set shadow to component.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n"},"shadowColor":{"type":["Color"],"description":"<p>Shadow color. Support same format as <code>color</code>.</p>\n"},"shadowOffsetX":{"type":["number"],"description":"<p>Offset distance on the horizontal direction of shadow.</p>\n","default":0},"shadowOffsetY":{"type":["number"],"description":"<p>Offset distance on the vertical direction of shadow.</p>\n","default":0},"opacity":{"type":["number"],"description":"<p>Opacity of the component. Supports value from 0 to 1, and the component will not be drawn when set to 0.</p>\n"}}}}},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series data.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<blockquote>\n<p><strong>Notice：</strong>series.data.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}},"zlevel":{"type":["number"],"description":"<p><code>zlevel</code> value of all graphical elements in custom series.</p>\n<p><code>zlevel</code> is used to make layers with Canvas. Graphical elements with different <code>zlevel</code> values will be placed in different Canvases, which is a common optimization technique. We can put those frequently changed elements (like those with animations) to a seperate <code>zlevel</code>. Notice that too many Canvases will increase memory cost, and should be used carefully on mobile phones to avoid crash.</p>\n<p>Canvases with bigger <code>zlevel</code> will be placed on Canvases with smaller <code>zlevel</code>.</p>\n","default":0},"z":{"type":["number"],"description":"<p><code>z</code> value of all graphical elements in custom series, which controls order of drawing graphical components. Components with smaller <code>z</code> values may be overwritten by those with larger <code>z</code> values.</p>\n<p><code>z</code> has a lower priority to <code>zlevel</code>, and will not create new Canvas.</p>\n","default":2},"silent":{"type":["boolean"],"description":"<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n","default":false},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut"},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut"},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0},"tooltip":{"type":["*"],"description":"<p>tooltip settings in this series.</p>\n","properties":{"position":{"type":["string","Array"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The position of the tooltip's floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code>Array</code></p>\n<p> Display the position of tooltip's floating layer through array, which supports absolute position and relative percentage.</p>\n<p> Example:</p>\n<pre><code class=\"lang-js\"> // absolute position, which is 10px to the left side and 10px to the top side of the container\n position: [10, 10]\n // relative position, in the exact center of the container\n position: ['50%', '50%']\n</code></pre>\n</li>\n<li><p><code>Function</code></p>\n<p> Callback function in the following form:</p>\n<pre><code class=\"lang-js\"> (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array\n</code></pre>\n<p> <strong>Parameters:</strong><br>\n point: Mouse position.<br>\n param: The same as formatter.<br>\n dom: The DOM object of tooltip.<br>\n rect: It is valid only when mouse is on graphic elements, which stands for a bounding box with <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code>.<br>\n size: The size of dom echarts container. For example: <code>{contentSize: [width, height], viewSize: [width, height]}</code>. <br></p>\n<p> <strong>Return:</strong><br>\n Return value is an array standing for tooltip position, which can be absolute pixels, or relative percentage.<br>\n Or can be an object, like <code>{left: 10, top: 30}</code>, or <code>{right: '20%', bottom: 40}</code>.<br></p>\n<p> For example:</p>\n<pre><code class=\"lang-js\"> position: function (point, params, dom, rect, size) {\n // fixed at top\n return [point[0], '10%'];\n }\n</code></pre>\n<p> Or:</p>\n<pre><code class=\"lang-js\"> position: function (pos, params, dom, rect, size) {\n // tooltip will be fixed on the right if mouse hovering on the left,\n // and on the left if hovering on the right.\n var obj = {top: 60};\n obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;\n return obj;\n }\n</code></pre>\n</li>\n<li><p><code>'inside'</code></p>\n<p> Center position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'top'</code></p>\n<p> Top position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'left'</code></p>\n<p> Left position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'right'</code></p>\n<p> Right position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n<li><p><code>'bottom'</code></p>\n<p> Bottom position of the graphic element where the mouse is in, which is only valid when <a href=\"#tooltip.trigger\">trigger</a> is <code>'item'</code>.</p>\n</li>\n</ul>\n"},"formatter":{"type":["string","Function"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The content formatter of tooltip's floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> and <code>{e}</code>, which stands for series name, data name and data value and ect. When <a href=\"#tooltip.trigger\">trigger</a> is set to be <code>'axis'</code>, there may be data from multiple series. In this time, series index can be refered as <code>{a0}</code>, <code>{a1}</code>, or <code>{a2}</code>.</p>\n<p><code>{a}</code>, <code>{b}</code>, <code>{c}</code>, <code>{d}</code> have different meanings for different series types:</p>\n<ul>\n<li><p>Line (area) charts, bar (column) charts, K charts: <code>{a}</code> for series name, <code>{b}</code> for category name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Scatter (bubble) charts: <code>{a}</code> for series name, <code>{b}</code> for data name, <code>{c}</code> for data value, <code>{d}</code> for none;</p>\n</li>\n<li><p>Map: <code>{a}</code> for series name, <code>{b}</code> for area name, <code>{c}</code> for merging data, <code>{d}</code> for none;</p>\n</li>\n<li><p>Pie charts, gauge charts, funnel charts: <code>{a}</code> for series name, <code>{b}</code> for data item name, <code>{c}</code> for data value, <code>{d}</code> for percentage.</p>\n</li>\n</ul>\n<p><strong>Example: </strong></p>\n<pre><code class=\"lang-js\">formatter: '{b0}: {c0}<br />{b1}: {c1}'\n</code></pre>\n<p><strong>2. Callback function</strong></p>\n<p>The format of callback function:</p>\n<pre><code class=\"lang-js\">(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string\n</code></pre>\n<p>The first parameter <code>params</code> is the data that the formatter needs. Its format is shown as follows:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n // the percentage of pie chart\n percent: number,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>When <a href=\"#tooltip.trigger\">trigger</a> is <code>'axis'</code>, or when tooltip is triggered by <a href=\"#xAxis.axisPointer\">axisPointer</a>, <code>params</code> is the data array of multiple series. The content of each item of the array is the same as above. Besides,</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // Series type\n seriesType: string,\n // Series index in option.series\n seriesIndex: number,\n // Series name\n seriesName: string,\n // Data name, or category name\n name: string,\n // Data index in input data array\n dataIndex: number,\n // Original data as input\n data: Object,\n // Value of data. In most series it is the same as data.\n // But in some series it is some part of the data (e.g., in map, radar)\n value: number|Array|Object,\n // encoding info of coordinate system\n // Key: coord, like ('x' 'y' 'radius' 'angle')\n // value: Must be an array, not null/undefined. Contain dimension indices, like:\n // {\n // x: [2] // values on dimension index 2 are mapped to x axis.\n // y: [0] // values on dimension index 0 are mapped to y axis.\n // }\n encode: Object,\n // dimension names list\n dimensionNames: Array<String>,\n // data dimension index, for example 0 or 1 or 2 ...\n // Only work in `radar` series.\n dimensionIndex: number,\n // Color of data\n color: string,\n\n}\n</code></pre>\n<p>Note: the usage of encode and dimensionNames can be:</p>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>If data is:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>We can get values that corresponding to y axis by:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p><strong>Note: </strong>Using array to present all the parameters in ECharts 2.x is not supported anymore.</p>\n<p>The second parameter <code>ticket</code> is the asynchronous callback flag which should be used along with the third parameter <code>callback</code> when it is used.</p>\n<p>The third parameter <code>callback</code> is asynchronous callback. When the content of tooltip is acquired asynchronously, <code>ticket</code> and <code>htm</code> as introduced above can be used to update tooltip with callback.</p>\n<p>Example:</p>\n<pre><code class=\"lang-js\">formatter: function (params, ticket, callback) {\n $.get('detail?name=' + params.name, function (content) {\n callback(ticket, toHTML(content));\n });\n return 'Loading';\n}\n</code></pre>\n"},"backgroundColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The background color of tooltip's floating layer.</p>\n","default":"'rgba(50,50,50,0.7)'"},"borderColor":{"type":["Color"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border color of tooltip's floating layer.</p>\n","default":"'#333'"},"borderWidth":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The border width of tooltip's floating layer.</p>\n","default":0},"padding":{"type":["number"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The floating layer of tooltip space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples: </p>\n<pre><code class=\"lang-js\">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n 5, // up\n 10, // right\n 5, // down\n 10, // left\n]\n</code></pre>\n","default":5},"textStyle":{"type":["Object"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>The text syle of tooltip's floating layer.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"'#fff'"},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":14},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"extraCssText":{"type":["string"],"description":"<p><br></p>\n<blockquote>\n<p><strong>Notice：</strong>series.tooltip only works when <a href=\"#tooltip.trigger\">tooltip.trigger</a> is <code>'item'</code>.<br></p>\n</blockquote>\n<p>Extra CSS style for floating layer. The following is an example for adding shadow.</p>\n<pre><code class=\"lang-js\">extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'\n</code></pre>\n"}}}}}]},"properties":{}},"color":{"type":["Array"],"description":"<p>The color list of palette. If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.</p>\n<p>Defaults:</p>\n<pre><code class=\"lang-js\">['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']\n</code></pre>\n","properties":{}},"backgroundColor":{"type":["Color"],"description":"<p>Background color. Defaults to have no background.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code>'rgb(128, 128, 128)'</code>. RGBA can be used when you need alpha channel, for example <code>'rgba(128, 128, 128, 0.5)'</code>. You may also use hexadecimal format, for example <code>'#ccc'</code>. Gradient color and texture are also supported besides single colors.</p>\n<pre><code class=\"lang-js\">// Linear gradient. First four parameters are x0, y0, x2, and y2, each ranged from 0 to 1, standing for percentage in the bounding box. If global is `true`, then the first four parameters are in absolute pixel positions.\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Radial gradient. First three parameters are x and y positions of center, and radius, similar to linear gradient.\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // color at 0% position\n }, {\n offset: 1, color: 'blue' // color at 100% position\n }],\n global: false // false by default\n}\n// Fill with texture\ncolor: {\n image: imageDom, // HTMLImageElement, and HTMLCanvasElement are supported, while string path is not supported\n repeat: 'repeat' // whether to repeat texture, whose value can be repeat-x, repeat-y, or no-repeat\n}\n</code></pre>\n</blockquote>\n","properties":{}},"textStyle":{"type":["Object"],"description":"<p>Global font style.</p>\n","properties":{"color":{"type":["Color"],"description":"<p> text color.</p>\n","default":"\"#fff\""},"fontStyle":{"type":["string"],"description":"<p> font style</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'italic'</code></li>\n<li><code>'oblique'</code></li>\n</ul>\n","default":"'normal'"},"fontWeight":{"type":["string"],"description":"<p> font thick weight</p>\n<p>Options are:</p>\n<ul>\n<li><code>'normal'</code></li>\n<li><code>'bold'</code></li>\n<li><code>'bolder'</code></li>\n<li><code>'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n","default":"normal"},"fontFamily":{"type":["string"],"description":"<p> font family</p>\n<p>Can also be 'serif' , 'monospace', ...</p>\n","default":"'sans-serif'"},"fontSize":{"type":["number"],"description":"<p> font size</p>\n","default":12},"lineHeight":{"type":["number"],"description":"<p>Line height of the text fregment.</p>\n<p>If <code>lineHeight</code> is not set in <code>rich</code>, <code>lineHeight</code> in parent level will be used. For example:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // `lineHeight` is not set, then it will be 56\n }\n }\n}\n</code></pre>\n"},"width":{"type":["number","string"],"description":"<p>Width of the text block. It is the width of the text by default. In most cases, there is no need to specify it. You may want to use it in some cases like make simple table or using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p><code>width</code> can also be percent string, like <code>'100%'</code>, which represents the percent of <code>contentWidth</code> (that is, the width without <code>padding</code>) of its container box. It is based on <code>contentWidth</code> because that each text fregment is layout based on the <code>content box</code>, where it makes no sense that calculating width based on <code>outerWith</code> in prectice.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"height":{"type":["number","string"],"description":"<p>Height of the text block. It is the width of the text by default. You may want to use it in some cases like using background image (see <code>backgroundColor</code>).</p>\n<p>Notice, <code>width</code> and <code>height</code> specifies the width and height of the content, without <code>padding</code>.</p>\n<p>Notice, <code>width</code> and <code>height</code> only work when <code>rich</code> specified.</p>\n"},"textBorderColor":{"type":["string"],"description":"<p>Storke color of the text.</p>\n","default":"'transparent'"},"textBorderWidth":{"type":["number"],"description":"<p>Storke line width of the text.</p>\n","default":0},"textShadowColor":{"type":["string"],"description":"<p>Shadow color of the text itself.</p>\n","default":"'transparent'"},"textShadowBlur":{"type":["number"],"description":"<p>Shadow blue of the text itself.</p>\n","default":0},"textShadowOffsetX":{"type":["number"],"description":"<p>Shadow X offset of the text itself.</p>\n","default":0},"textShadowOffsetY":{"type":["number"],"description":"<p>Shadow Y offset of the text itself.</p>\n","default":0}}},"animation":{"type":["boolean"],"description":"<p>Whether to enable animation.</p>\n","default":true,"properties":{}},"animationThreshold":{"type":["number"],"description":"<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n","default":2000,"properties":{}},"animationDuration":{"type":["number","Function"],"description":"<p>Duration of the first animation, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":1000,"properties":{}},"animationEasing":{"type":["string"],"description":"<p>Easing method used for the first animation. Varied easing effects can be found at <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">easing effect example</a>.</p>\n","default":"cubicOut","properties":{}},"animationDelay":{"type":["number","Function"],"description":"<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0,"properties":{}},"animationDurationUpdate":{"type":["number","Function"],"description":"<p>Time for animation to complete, which supports callback function for different data to have different animation effect:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n","default":300,"properties":{}},"animationEasingUpdate":{"type":["string"],"description":"<p>Easing method used for animation.</p>\n","default":"cubicOut","properties":{}},"animationDelayUpdate":{"type":["number","Function"],"description":"<p>Delay before updating animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // delay for later data is larger\n return idx * 100;\n}\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">this example</a> for more information.</p>\n","default":0,"properties":{}},"useUTC":{"type":["boolean"],"description":"<p>Whether to use UTC in display.</p>\n<ul>\n<li><code>true</code>: When <code>axis.type</code> is <code>'time'</code>, ticks is determined according to UTC, and <code>axisLabel</code> and <code>tooltip</code> use UTC by default.</li>\n<li><code>false</code>: When <code>axis.type</code> is <code>'time'</code>, ticks is determined according to local time, and <code>axisLabel</code> and <code>tooltip</code> use local time by default.</li>\n</ul>\n<p>The default value of <code>useUTC</code> is false, for sake of considering:</p>\n<ul>\n<li>In many cases, labels should be displayed in local time (whether the time is stored in server in local time or UTC).</li>\n<li>If user uses time string (like '2012-01-02') in data, it usually means local time if time zone is not specified. Time should be displayed in its original time zone by default.</li>\n</ul>\n<p>Notice: the setting only effects "display time", but not "parse time".\nAbout how time value (like <code>1491339540396</code>, <code>'2013-01-04'</code>, ...) is parsed in echarts, see <a href=\"#series-line.data\">the time part in date</a>.</p>\n","default":false,"properties":{}}}}} |